<template>
  <div class="registerDetail" ref="contentData">
    <div class="task_header">
      <div class="top_title">
        <div class="top_title_back" @click="onClickLeft">
          <i class="iconfont icon-back"></i>
        </div>
        <div class="top_title_val">{{ $route.meta.title }}</div>
        <div class="task_transbox" @click="handleTaskTrans">
          <img class="task_trans" src="@/assets/images/trans_icon.png" />
          <div>转交</div>
        </div>
      </div>
    </div>

    <div class="task_detail">
      <div class="task_detail_header">
        <div class="task_detail_headerbox">
          <div class="title">{{ dataSource.taskName ? dataSource.taskName : '-' }}</div>
          <div class="name">
            <div class="txt">{{ dataSource.customerName ? dataSource.customerName : '-' }}</div>
            <div class="txt">{{ dataSource.carModelName ? dataSource.carModelName : '-' }}</div>
          </div>
          <div v-if="dataSource.oneBillStauts" class="status"
            :class="dataSource.oneBillStauts == '已处理' ? 'status2' : 'status1'">
            <img class="status_icon"
              :src="require(`@/assets/images/${dataSource.oneBillStauts == '已处理' ? 'status2' : 'status1'}.png`)" />
            {{ dataSource.oneBillStauts }}
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="showTablistVisible" closeable position="bottom" :style="{ height: '160px' }">
      <div class="pop_tab">
        <div class="title">选项卡快速选择</div>
        <div class="pop_tablist">
          <div class="pop_tab_item" :class="tabIndex == index ? 'active' : ''" v-for="(item, index) in tabList"
            :key="index" @click.stop="handleTab(index)">{{ item.name }}</div>
        </div>
      </div>
    </van-popup>

    <!-- 底部tab -->
    <div class="tabBarBox">
      <div class="icon_menubox" @click.stop="showTablistVisible = true">
        <img class="icon_menu" src="@/assets/images/show_menu.png" />
      </div>
      <van-tabs v-model="tabIndex" :swipe-threshold="3">
        <van-tab title="任务信息">
          <div class="detailbox_item mt175">
            <div class="detailbox_item_title">任务概览</div>
            <div class="detail_content">
              <div class="task_item_type">
                <div class="task_item_tt">任务类型:</div>
                <div class="task_item_val">{{ dataSource.taskTypeName ? dataSource.taskTypeName : '-' }}</div>
              </div>
              <div class="task_item_type">
                <div class="task_item_tt">任务描述:</div>
                <div class="task_item_desc">{{ dataSource.taskDes ? dataSource.taskDes : '-' }}</div>
              </div>
              <div class="task_itembox">
                <div class="task_itembox_con">
                  <div class="task_label">任务开始时间：</div>
                  <div class="task_value">
                    {{ dataSource.taskCreateTime ? dataSource.taskCreateTime.substring(0, 10) : '- -' }}
                  </div>
                </div>
                <div class="task_itembox_con">
                  <div class="task_label">应跟进时间：</div>
                  <div class="task_value">
                    {{ dataSource.shuldFollowTime ? dataSource.shuldFollowTime.substring(0, 10) : '- -' }}
                  </div>
                </div>
                <div class="task_itembox_con">
                  <div class="task_label">任务跟进人员：</div>
                  <div class="task_value">{{ dataSource.taskPerson ? dataSource.taskPerson : '- -' }}</div>
                </div>
                <div class="task_itembox_con">
                  <div class="task_label">最近跟进时间：</div>
                  <div class="task_value">{{ dataSource.lastFollowInTime ? dataSource.lastFollowInTime : '- -' }}</div>
                </div>
                <div class="task_itembox_con" v-if="dataSource.taskTypeName == '续保到期提醒'">
                  <div class="task_label">保险公司：</div>
                  <div class="task_value">{{ dataSource.insCmpName ? dataSource.insCmpName : '- -' }}</div>
                </div>

                <div class="task_itembox_con" v-if="dataSource.taskTypeName == '续保到期提醒'">
                  <div class="task_label">保险到期日：</div>
                  <div class="task_value">{{ dataSource.insureDate ? dataSource.insureDate : '- -' }}</div>
                </div>
                <div class="task_itembox_con" v-if="dataSource.taskTypeName == '续保到期提醒'">
                  <div class="task_label">保险类型：</div>
                  <div class="task_value">{{ dataSource.insurance ? dataSource.insurance : '- -' }}</div>
                </div>

                <div class="task_itembox_con" v-if="dataSource.taskTypeName == '续保到期提醒'">
                  <div class="task_label">保险分类：</div>
                  <div class="task_value">{{ dataSource.insureType ? dataSource.insureType : '- -' }}</div>
                </div>

                <div class="task_itembox_con">
                  <div class="task_label">是否会员绑车：</div>
                  <div class="task_value">{{ dataSource.isHYCar ? dataSource.isHYCar : '- -' }}</div>
                </div>
                <div class="task_itembox_con">
                  <div class="task_label">{{ dataSource.taskTypeName == '续保到期提醒' ? '是否续保' : '是否回场' }}：</div>
                  <div class="task_value">{{ dataSource.taskResult ? dataSource.taskResult : '- -' }}</div>
                </div>
              </div>
            </div>
          </div>

          <div class="detailbox_item">
            <div class="detailbox_item_title">本车关联任务</div>

            <div class="relat_tab">
              <div class="relat_tab_item" v-for="(item, index) in relatTabList" :key="index"
                :class="relatTabIndex == index ? 'active' : ''" @click="handleRelatChange(index)">{{ item.name }}</div>
            </div>
            <div class="relat_content" v-if="relevanceList && relevanceList.length != 0">
              <div class="relat_item" v-for="(item, index) in relevanceList" :key="index" @click="handleDealTask(item)">
                <div class="relat_content_header">
                  <div class="name">{{ item.taskName }}</div>
                  <div class="status" :class="item.oneBillStatus == '已处理' ? '' : 'status2'">{{ item.oneBillStatus }}
                  </div>
                </div>
                <div class="relat_carInfo">{{ item.taskDes ? item.taskDes : '-' }}</div>

                <div class="relat_user">
                  <div class="relat_user_lt">任务跟进人员：{{ item.taskPerson ? item.taskPerson : '-' }}</div>
                  <div class="relat_user_rt">应跟进时间：{{ item.shuldFollowTime ? item.shuldFollowTime : '-' }}</div>
                </div>
              </div>
            </div>
            <div class="no_icon" v-else>
              <img class="no_icon_img" src="@/assets/images/no_icon.png" />
              <div class="no_icon_txt">暂无内容</div>
            </div>
          </div>

          <div class="detailbox_item" :class="dataSource.oneBillStauts != '已处理' ? 'mb80' : ''">
            <div class="detailbox_item_titlebox">
              <div class="detailbox_item_title">跟进信息</div>
              <div class="hisBtn" @click="goHistory">
                <span class="iconfont icon-follow"></span>历史跟进记录
              </div>
            </div>
            <div class="followInfo_content" v-if="dataSource.followEntry && dataSource.followEntry.length != 0">
              <div class="followInfo_item" v-for="(item, index) in dataSource.followEntry" :key="index"
                :class="index == 0 ? 'active' : ''">
                <div class="followInfo_top">
                  <div class="followInfo_circle"></div>
                  <div class="followInfo_name">{{ item.followNumber }}</div>
                </div>
                <div class="followInfo_box">
                  <div class="followInfo_linebox">
                    <div class="followInfo_line"></div>
                  </div>
                  <div class="followInfo_val">
                    <div class="followInfo_val_item">
                      <div class="item_label">跟进人员：</div>
                      <div class="item_val">{{ item.followPerson ? item.followPerson : '-' }}</div>
                    </div>
                    <div class="followInfo_val_item">
                      <div class="item_label">跟进方式：</div>
                      <div class="item_val">{{ item.followType ? item.followType : '-' }}</div>
                    </div>
                    <div class="followInfo_val_item">
                      <div class="item_label">跟进结果：</div>
                      <div class="item_val">{{ item.followResult ? item.followResult : '-' }}</div>
                    </div>
                    <div class="followInfo_val_item">
                      <div class="item_label">跟进时间：</div>
                      <div class="item_val">{{ item.followDate ? item.followDate : '-' }}</div>
                    </div>
                    <div class="followInfo_val_item" v-if="item.followResult == '持续跟进'">
                      <div class="item_label">下次跟进时间：</div>
                      <div class="item_val">{{ item.nextFollowDate ? item.nextFollowDate : '-' }}</div>
                    </div>
                    <div class="followInfo_val_item" v-if="item.followResult == '邀约成功'">
                      <div class="item_label">预约进场时间：</div>
                      <div class="item_val">{{ item.bookInDate ? item.bookInDate : '-' }}</div>
                    </div>
                    <div class="followInfo_val_item" v-if="item.followResult == '邀约成功'">
                      <div class="item_label">预约维修中心：</div>
                      <div class="item_val">{{ item.fixCenterName ? item.fixCenterName : '-' }}</div>
                    </div>
                    <div class="followInfo_val_item" v-if="item.followResult == '邀约成功'">
                      <div class="item_label">预约顾问：</div>
                      <div class="item_val">{{ item.empName ? item.empName : '-' }}</div>
                    </div>
                    <div class="followInfo_val_item2" v-if="item.followResult == '持续跟进' || item.followResult == '邀约成功'">
                      <div class="item_label">跟进备注：</div>
                      <div class="item_val">{{ item.folloeNote ? item.folloeNote : '-' }}</div>
                    </div>
                    <div class="followInfo_val_item" v-if="item.followResult == '本次战败'">
                      <div class="item_label">战败原因：</div>
                      <div class="item_val">{{ item.failed ? item.failed : '-' }}</div>
                    </div>
                    <div class="followInfo_val_item2" v-if="item.followResult == '本次战败'">
                      <div class="item_label">战败说明：</div>
                      <div class="item_val">{{ item.followSupple ? item.followSupple : '-' }}</div>
                    </div>
                    <div v-if="item.calls!=null&&item.calls.length>0">
                      <div class="followInfo_val_item borderClass" v-for="(call, ind) in item.calls" :key="ind">
                        <van-icon name="play-circle-o" color="#1684fc" size="21"
                          @click="play(call,'cf'+item.entryId+call.id)"
                          v-if="playIndex!=('cf'+item.entryId+call.id)&&(call.localRecordFile!=''&&call.localRecordFile!=null)" />
                        <van-icon name="pause-circle-o" color="#1684fc" size="21"
                          @click="stop('cf'+item.entryId+call.id)"
                          v-if="playIndex==('cf'+item.entryId+call.id)&&(call.localRecordFile!=''&&call.localRecordFile!=null)" />
                        <div style="width: 43%;" class="videoClass"
                          v-if="call.localRecordFile!=''&&call.localRecordFile!=null">
                          <progress-custom :showNumber="false"
                            :value="audioStatus==('cf'+item.entryId+call.id)?playTime:0"
                            @SetOpacityConfig="updateAudio($event,'cf'+item.entryId,call)" />
                        </div>
                        <div style="width: 30%;" class="videoClass"
                          v-if="call.localRecordFile!=''&&call.localRecordFile!=null">
                          {{formateTime(audioStatus==('cf'+item.entryId+call.id)?playIngTime:0)}} /
                          {{formateTime(call.bridgeDuration)}}
                        </div>
                        <div style="font-size: 14px;width:12%;color: #165dff;" @click="goAsr(call)"
                          v-if="call.fileStatus==1">
                          转写
                        </div>
                        <div v-else style="width:12%;height:100%;"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="no_icon" v-else>
              <img class="no_icon_img" src="@/assets/images/no_icon.png" />
              <div class="no_icon_txt">暂无内容</div>
            </div>
            <audio id="audio" preload="metadata" :src="tapeFile" />
          </div>
        </van-tab>
        <van-tab title="车辆信息">
          <div class="detailbox_item mt175">
            <div style="display: flex;justify-content: space-between">
              <div class="detailbox_item_title">车辆信息概览</div>
              <div style="color: #3979FF;font-size: 16px" @click="showUpdateMaintain(carInfo)"> <van-icon name="edit" color="#3979FF"/> 保养记录登记</div>
            </div>
            <div class="carInfo_content">
              <div class="carInfo_item">
                <div class="item_label">维修中心：</div>
                <div class="item_val">{{ carInfo.fixCenterName ? carInfo.fixCenterName : '- -' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">服务顾问：</div>
                <div class="item_val">{{ carInfo.serverPsnName ? carInfo.serverPsnName : '- -' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">车牌号：</div>
                <div class="item_val">{{ carInfo.carNo ? carInfo.carNo : '- -' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">车架号：</div>
                <div class="item_val">{{ carInfo.vinCode ? carInfo.vinCode : '- -' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">车型：</div>
                <div class="item_val">{{ carInfo.carModelNameName ? carInfo.carModelNameName : '- -' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">上次进场时间：</div>
                <div class="item_val">{{ carInfo.lastIn ? carInfo.lastIn : ' - -' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">当前里程数：</div>
                <div class="item_val">{{ carInfo.carMile ? carInfo.carMile + '(km)' : '- - ' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">会员等级：</div>
                <div class="item_val">{{ carInfo.currentGradeName ? carInfo.currentGradeName : '- - ' }}</div>
              </div>

              <div class="carInfo_item">
                <div class="item_label">客户VIP等级：</div>
                <div class="item_val">{{ carInfoKhyy.storeCusLevel ? carInfoKhyy.storeCusLevel : '- - ' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">等级设定理由：</div>
                <div class="item_val" :style="carInfoKhyy.setReason ?{ width: '65%', wordBreak: 'break-word' }: ''">
                  {{ carInfoKhyy.setReason ? carInfoKhyy.setReason : '- - ' }}</div>
              </div>

              <div class="carInfo_item">
                <div class="item_label">所属客户管家：</div>
                <div class="item_val">{{ carInfoKhyy.khgj ? carInfoKhyy.khgj : '- - ' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">车辆状态：</div>
                <div class="item_val">{{ carInfoKhyy.clzt ? carInfoKhyy.clzt : '- - ' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">保险状态：</div>
                <div class="item_val">{{ carInfoKhyy.bxzt ? carInfoKhyy.bxzt : '- - ' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">上次接待SA：</div>
                <div class="item_val">{{ carInfoKhyy.lastStoreSa ? carInfoKhyy.lastStoreSa : '- - ' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">上次保险出单人：</div>
                <div class="item_val">{{ carInfoKhyy.insDjr ? carInfoKhyy.insDjr : '- - ' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">上次保险出单时间：</div>
                <div class="item_val">{{ carInfoKhyy.insCdrq ? carInfoKhyy.insCdrq : '- - ' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">上次保险出单类型：</div>
                <div class="item_val">{{ carInfoKhyy.insLx ? carInfoKhyy.insLx : '- - ' }}</div>
              </div>

<!--              <div class="carInfo_item">-->
<!--                <div class="item_label">车辆里程数：</div>-->
<!--                <div class="item_val">{{ carInfo.currCarMile ? carInfo.currCarMile + '(km)' : '- -' }}</div>-->
<!--              </div>-->
            </div>
          </div>
          <div class="detailbox_item">
            <div class="detailbox_item_title">车辆保修保险信息</div>
            <div class="carInfo_content">
              <div class="carInfo_item">
                <div class="item_label">保险类型：</div>
                <div class="item_val">{{ carInfo.inusuranceType ? carInfo.inusuranceType : '- -' }}</div>
              </div>

              <div class="carInfo_item">
                <div class="item_label">保险公司：</div>
                <div class="item_val">{{ carInfo.inusuranceComName ? carInfo.inusuranceComName : '- -' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">保险到期日：</div>
                <div class="item_val">{{ carInfo.inusuranceDate ? carInfo.inusuranceDate : '- -' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">原厂保修到期日：</div>
                <div class="item_val">{{ dataSource.fixEndDate ? dataSource.fixEndDate : '- -' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">自营延保到期日：</div>
                <div class="item_val">{{ dataSource.zyEndDate ? dataSource.zyEndDate : '- -' }}</div>
              </div>
            </div>
          </div>
          <div class="detailbox_item">
            <div class="detailbox_item_title">非车险种记录</div>
            <div class="repair_content">
              <div class="repair_list" v-if="dataSource.notCarBill && dataSource.notCarBill.length != 0">
                <div class="repair_item" v-for="(item, index) in dataSource.notCarBill" :key="index">
                  <!-- <div class="repair_list" v-if="repairList && repairList.length != 0">
                  <div class="repair_item" v-for="(item, index) in repairList" :key="index">-->
                  <div class="item_bottom">
                    <div class="item_box">
                      <div class="item_lt">
                        <div class="item_lable">投保险种：</div>
                        <div class="item_val">{{ item.insName ? item.insName : '- -' }}</div>
                      </div>
                      <div class="item_rt2">
                        <div class="item_lable">保险公司：</div>
                        <div class="item_val">{{ item.insCmpName ? item.insCmpName : '- -' }}</div>
                      </div>
                    </div>
                    <div class="item_box">
                      <div class="item_lt">
                        <div class="item_lable">起保日期：</div>
                        <div class="item_val">{{ item.beginDate ? item.beginDate : '- -' }}</div>
                      </div>
                      <div class="item_rt2">
                        <div class="item_lable">终保日期：</div>
                        <div class="item_val">{{ item.endDate ? item.endDate : '- -' }}</div>
                      </div>
                    </div>
                    <div class="item_box">
                      <div class="item_lt">
                        <div class="item_lable">被保险人：</div>
                        <div class="item_val">{{ item.insPsn ? item.insPsn : '- -' }}</div>
                      </div>
                      <div class="item_rt2">
                        <div class="item_lable">被保险人电话：</div>
                        <div class="item_val">{{ item.insPhone ? item.insPhone : '- -' }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="no_icon" v-else>
                <img class="no_icon_img" src="@/assets/images/no_icon.png" />
                <div class="no_icon_txt">暂无内容</div>
              </div>
            </div>
          </div>
          <div class="detailbox_item" :class="dataSource.oneBillStauts != '已处理' ? 'mb80' : ''">
            <div class="detailbox_item_title">车辆维修履历</div>
            <div class="repair_content">
              <div class="repair_list" v-if="repairList && repairList.length != 0">
                <div class="repair_item" v-for="(item, index) in repairList" :key="index">
                  <div class="item_top">
                    <div class="item_num">
                      <img class="item_icon" src="@/assets/images/repair_icon.png" />
                      <div class="item_name">工单编号：{{ item.repairNumber }}</div>
                    </div>
                    <div class="item_btn" @click="goRepairDetail(item)">详情</div>
                  </div>
                  <div class="item_bottom">
                    <div class="item_box">
                      <div class="item_lt">
                        <div class="item_lable">工单类型：</div>
                        <div class="item_val">{{ item.repairWorkBillType ? item.repairWorkBillType : '- -' }}</div>
                      </div>
                      <div class="item_rt">
                        <div class="item_lable">服务顾问：</div>
                        <div class="item_val">{{ item.serverPersonName ? item.serverPersonName : '- -' }}</div>
                      </div>
                    </div>
                    <div class="item_box">
                      <div class="item_lt">
                        <div class="item_lable">进场时间：</div>
                        <div class="item_val">{{ item.repairBizDate ? item.repairBizDate : '- -' }}</div>
                      </div>
                      <div class="item_rt">
                        <div class="item_lable">送修人：</div>
                        <div class="item_val">
                          {{ item.repairCus ? item.repairCus : '- -' }}
                          <span v-if="item.repairCusphone" class="item_tel"
                            @click="handleTel(getAllName('送修人',item.repairCus),item.repairCusphone)">
                            <van-icon name="phone" size="10" color="#59A1FF" />
                            {{ item.repairCusphone ? item.repairCusphone : '' }}</span>
                        </div>
                      </div>
                    </div>
                    <div class="item_box">
                      <div class="item_lt">
                        <div class="item_lable">合计金额：</div>
                        <div class="item_val">{{ item.repairVoucherAmt ? item.repairVoucherAmt + '(元)' : '- -' }}</div>
                      </div>
                    </div>
                    <div class="item_box">
                      <div class="item_lt">
                        <div class="item_lable">卡券抵用：</div>
                        <div class="item_val">{{ item.repairTotalSum ? item.repairTotalSum + '(元)' : '- -' }}</div>
                      </div>
                    </div>
                    <div class="item_box2">
                      <div class="item_lt">
                        <div class="item_lable">人工操作：</div>
                        <div class="item_val">{{ item.repairRstRemark ? item.repairRstRemark : '- -' }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="no_icon" v-else>
                <img class="no_icon_img" src="@/assets/images/no_icon.png" />
                <div class="no_icon_txt">暂无内容</div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="联系人信息">
          <div class="detailbox_item mt175">
            <div class="detailbox_item_title">联系人信息</div>
            <div class="contact_content">
              <div class="contact_item">
                <div class="contact_top">
                  <div class="item_label">客户信息</div>
                  <div class="item_icon">
                    <img class="item_img" src="@/assets/images/wechat_icon.png" @click="getExList(dataSource)" />
                    <img class="item_img" src="@/assets/images/tel_icon.png"
                      @click="handleTel(getAllName('客户',dataSource.customerName),dataSource.mobile)" />
                  </div>
                </div>
                <div class="contact_bottom">
                  <div class="item_name">
                    <div class="txt1">姓名：</div>
                    <div class="txt2">{{ dataSource.customerName ? dataSource.customerName : '-' }}</div>
                  </div>
                  <div class="item_name">
                    <div class="txt1">手机号码：</div>
                    <div class="txt2">{{ dataSource.mobile ? dataSource.mobile : '-' }}</div>
                  </div>
                </div>
              </div>
              <div class="contact_item">
                <div class="contact_top">
                  <div class="item_label">车主信息</div>
                  <div class="item_icon">
                    <img class="item_img" src="@/assets/images/wechat_icon.png" @click="getExList(dataSource)" />
                    <img class="item_img" src="@/assets/images/tel_icon.png"
                      @click="handleTel(getAllName('车主',dataSource.ownerName),dataSource.ownerPhone)" />
                  </div>
                </div>
                <div class="contact_bottom">
                  <div class="item_name">
                    <div class="txt1">姓名：</div>
                    <div class="txt2">{{ dataSource.ownerName ? dataSource.ownerName : '-' }}</div>
                  </div>
                  <div class="item_name">
                    <div class="txt1">手机号码：</div>
                    <div class="txt2">{{ dataSource.ownerPhone ? dataSource.ownerPhone : '-' }}</div>
                  </div>
                </div>
              </div>
              <div class="contact_item">
                <div class="contact_top">
                  <div class="item_label">送修人</div>
                  <div class="item_icon">
                    <img class="item_img" src="@/assets/images/wechat_icon.png" @click="getExList(dataSource)" />
                    <img class="item_img" src="@/assets/images/tel_icon.png"
                      @click="handleTel(getAllName('送修人',dataSource.contactPeople),dataSource.contactPhone)" />
                  </div>
                </div>
                <div class="contact_bottom">
                  <div class="item_name">
                    <div class="txt1">姓名：</div>
                    <div class="txt2">{{ dataSource.contactPeople ? dataSource.contactPeople : '-' }}</div>
                  </div>
                  <div class="item_name">
                    <div class="txt1">手机号码：</div>
                    <div class="txt2">{{ dataSource.contactPhone ? dataSource.contactPhone : '-' }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="detailbox_item">
            <div class="detailbox_item_title">客户群信息</div>
            <van-pull-refresh class="groupInfo_content h600" v-model="groupRefreshing" @refresh="groupOnRefresh">
              <van-list v-model="groupLoading" :finished="groupFinished" finished-text="没有更多了"
                @load="getCustomerGroupInfo" v-if="groupList && groupList.length != 0">
                <div class="groupInfo">
                  <div class="groupInfo_item" v-for="(item, index) in groupList" :key="index">
                    <div class="groupInfo_icon">群</div>
                    <div class="groupInfo_detail">
                      <div class="groupInfo_name">{{ item.groupName }}</div>
                      <div class="groupInfo_txt">
                        <span class="groupInfo_span">{{ item.groupNums }}人</span>|
                        <span class="groupInfo_span1">群主：{{ item.adminUserName }}</span>
                      </div>
                      <div class="groupInfo_txt1">创建时间：{{ item.createTime }}</div>
                    </div>
                    <div class="groupInfo_btn">
                      <div  @click.stop="handleShowUser(item)">查看群成员</div>
                      <div class="to_chat">
                        <i class="iconfont  icon-dir-right" style="color: #4898FF;font-size: 22px;"  @click="openChat(item)"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </van-list>
              <div class="no_icon" v-else>
                <img class="no_icon_img" src="@/assets/images/no_icon.png" />
                <div class="no_icon_txt">暂无内容</div>
              </div>
            </van-pull-refresh>
          </div>
        </van-tab>

        <div class="addBtn" v-if="dataSource.oneBillStauts == '未处理'">
          <div class="orderItem_filebox" @click="addFollow"
            :class="dataSource.twoBillStatus == '邀约成功' ? 'btn_disable' : ''">添加跟进记录</div>
        </div>

        <van-tab title="卡券信息">
          <div class="detailbox_item mt175" :class="dataSource.oneBillStauts != '已处理' ? 'mb80' : ''">
            <div class="card_content">
              <div class="card_list" v-if="cardList && cardList.length != 0">
                <div class="card_item" v-for="(item, index) in cardList" :key="index">
                  <div class="item_lt">¥{{ item.amount }}</div>
                  <div class="item_rt">
                    <div class="item_name">{{ item.couponsName }}</div>
                    <div class="item_number">券号：{{ item.ticketNumber }}</div>
                    <div class="item_time">
                      <div class="txt1">{{ item.usedDate }}领用</div>
                      <div>{{ item.expireDate }}到期</div>
                    </div>
                  </div>
                  <div class="item_type">{{ item.typeName }}</div>
                </div>
              </div>
              <div class="no_icon" v-else style="padding-top: 100px">
                <img class="no_icon_img" src="@/assets/images/no_icon.png" />
                <div class="no_icon_txt">暂无内容</div>
              </div>
            </div>
          </div>
        </van-tab>

        <van-tab title="跟进历史">
          <div class="null_height"></div>
          <div class="detailbox_item mt0">
            <div class="detailbox_item_search">
              <div class="followParams">
                <div class="followParams_item">
                  <div class="followParams_label">任务类型</div>
                  <div class="followParams_select" @click="handleSelectTaskType">
                    <span class="followParams_select_txt">{{ followParams.taskTypeName }}</span>
                    <span class="iconfont icon-more"></span>
                  </div>
                </div>
                <div class="followParams_item" @click="handleDateOrder">
                  <div class="followParams_label">跟进时间</div>
                  <div class="followParams_icon">
                    <span :class="followParams.isDesc ? 'iconfont icon-desc' : 'iconfont icon-asc'"></span>
                  </div>
                </div>
              </div>
            </div>

            <van-pull-refresh id="followId" class="followListbox" v-model="followRefreshing" @refresh="followOnRefresh">
              <van-list v-model="followLoading" :finished="followFinished" finished-text="没有更多了" @load="getFollowData"
                v-if="followHistoryList && followHistoryList.length != 0">
                <div class="followList">
                  <div class="followInfo_content">
                    <div class="followInfo_item active" v-for="(item, index) in followHistoryList" :key="index"
                      :class="index == 0 ? 'active' : ''">
                      <div class="followInfo_top">
                        <div class="followInfo_circle"></div>
                        <div class="followInfo_name">
                          {{ item.followDate }}
                          <span
                            :class="item.followResult == '本次战败' ? 'red' : item.followResult == '邀约成功' ? 'green' : ''">
                            {{
                            item.followResult
                            }}
                          </span>
                        </div>
                      </div>
                      <div class="followInfo_box">
                        <div class="followInfo_linebox">
                          <div class="followInfo_line"></div>
                        </div>
                        <div class="followInfo_val">
                          <div class="followInfo_val_item">
                            <div class="item_label">跟进类型：</div>
                            <div class="item_val">{{ item.taskTypeName ? item.taskTypeName : '-' }}</div>
                          </div>
                          <div class="followInfo_val_item">
                            <div class="item_label">跟进人员：</div>
                            <div class="item_val">{{ item.taskPersonName ? item.taskPersonName : '-' }}</div>
                          </div>
                          <div class="followInfo_val_item">
                            <div class="item_label">跟进方式：</div>
                            <div class="item_val">{{ item.followType ? item.followType : '-' }}</div>
                          </div>

                          <div class="followInfo_val_item" v-if="item.followResult == '持续跟进'">
                            <div class="item_label">下次跟进时间：</div>
                            <div class="item_val">{{ item.nextFollowDate ? item.nextFollowDate : '-' }}</div>
                          </div>
                          <div class="followInfo_val_item" v-if="item.followResult == '邀约成功'">
                            <div class="item_label">是否回场：</div>
                            <div class="item_val">{{ item.taskResult ? item.taskResult : '-' }}</div>
                          </div>
                          <div class="followInfo_val_item2"
                            v-if="item.followResult == '持续跟进' || item.followResult == '邀约成功'">
                            <div class="item_label">跟进备注：</div>
                            <div class="item_val">{{ item.followNote ? item.followNote : '-' }}</div>
                          </div>
                          <div class="followInfo_val_item"
                            v-if="item.followResult == '本次战败' || item.followResult == '续保战败'">
                            <div class="item_label">战败原因：</div>
                            <div class="item_val">{{ item.failed ? item.failed : '-' }}</div>
                          </div>
                          <div class="followInfo_val_item2"
                            v-if="item.followResult == '本次战败' || item.followResult == '续保战败'">
                            <div class="item_label">战败说明：</div>
                            <div class="item_val">{{ item.followSupple ? item.followSupple : '-' }}</div>
                          </div>
                          <div v-if="item.calls!=null&&item.calls.length>0">
                            <div class="followInfo_val_item borderClass" v-for="(call, ind) in item.calls" :key="ind">
                              <van-icon name="play-circle-o" color="#1684fc" size="21"
                                @click="play(call,'of'+item.entryId+call.id)"
                                v-if="playIndex!=('of'+item.entryId+call.id)&&(call.localRecordFile!=''&&call.localRecordFile!=null)" />
                              <van-icon name="pause-circle-o" color="#1684fc" size="21"
                                @click="stop('of'+item.entryId+call.id)"
                                v-if="playIndex==('of'+item.entryId+call.id)&&(call.localRecordFile!=''&&call.localRecordFile!=null)" />
                              <div style="width: 43%;" class="videoClass"
                                v-if="call.localRecordFile!=''&&call.localRecordFile!=null">
                                <progress-custom :showNumber="false"
                                  :value="audioStatus==('of'+item.entryId+call.id)?playTime:0"
                                  @SetOpacityConfig="updateAudio($event,'of'+item.entryId,call)" />
                              </div>
                              <div style="width: 30%;" class="videoClass"
                                v-if="call.localRecordFile!=''&&call.localRecordFile!=null">
                                {{formateTime(audioStatus==('of'+item.entryId+call.id)?playIngTime:0)}} /
                                {{formateTime(call.bridgeDuration)}}
                              </div>
                              <div style="font-size: 14px;width:12%;color: #165dff;" @click="goAsr(call)"
                                v-if="call.fileStatus==1">
                                转写
                              </div>
                              <div v-else style="width:12%;height:100%;"></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </van-list>
              <div class="no_icon pt80" v-else>
                <img class="no_icon_img" src="@/assets/images/no_icon.png" />
                <div class="no_icon_txt">暂无数据</div>
              </div>
            </van-pull-refresh>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <van-dialog v-model="showDialog" title show-cancel-button :showConfirmButton="false">
      <div class="contact_list">
        <div class="contact_item flex" v-for="(item, index) in contactList" :key="index">
          <div class="contact_lt flex">
            <img v-if="item.avatar" class="contact_header" :src="item.avatar" />
            <div class="contact_name">{{ item.remark ? item.remark : item.name }}</div>
            <div class="contact_com_wx" v-if="item.type == 1">@微信</div>
            <div class="contact_com" v-if="item.type == 2">@{{ item.corpName ? item.corpName : item.corpFullName }}
            </div>
          </div>
          <div class="contact_btn" @click="runWxChat(item)">联系</div>
        </div>
      </div>
    </van-dialog>

    <!-- 群成员列表 -->
    <van-dialog v-model="showUser" title show-cancel-button :showConfirmButton="false" :before-close="beforeClose">
      <van-pull-refresh class="userList_content h600" v-model="userRefreshing" @refresh="userOnRefresh">
        <van-list v-model="userLoading" :finished="userFinished" finished-text="没有更多了" @load="showUserData"
          v-if="wxUserList && wxUserList.length != 0">
          <div class="contact_list">
            <div class="contact_item flex userList_item membot" v-for="(item, index) in wxUserList" :key="index">
              <div class="contact_lt flex">
                <img class="contact_header" src="@/assets/images/header_img.png" />
                <div class="contact_name">{{ item.menberName ? item.menberName : '-' }}</div>
              </div>
              <div class="contact_type">{{ item.memberType ? item.memberType : '-' }}</div>
            </div>
          </div>
        </van-list>
        <div class="no_icon pt80" v-else>
          <img class="no_icon_img" src="@/assets/images/no_icon.png" />
          <div class="no_icon_txt">暂无数据</div>
        </div>
      </van-pull-refresh>
    </van-dialog>

    <div v-if="showTransVisible" class="fixCenter_pop" :style="{ height: '100vh', width: '100%' }">
      <div class="select_fixcenter">
        <div class="task_header_searchbox">
          <div class="task_header_search">
            <img class="search_icon" src="@/assets/images/search_icon.png" />
            <input v-model="likeWho" class="search_val" placeholder="请输入模糊查询关键字" />
          </div>
        </div>
        <div class="fixCenter_content">
          <div class="fixCenter_lt">
            <div class="fixCenter_list">
              <div class="fixCenter_item" v-for="(item, index) in columnsFixCenter" :key="index"
                @click="handleSelectFixCenter(index)" :class="fixCenterIndex == index ? 'active' : ''">
                <img class="item_icon"
                  :src="require(`@/assets/images/fixcenter_icon${fixCenterIndex == index ? '1' : ''}.png`)" />
                <div class="item_name">{{ item.name }}</div>
              </div>
            </div>
          </div>
          <div class="fixCenter_rt">
            <div class="service_list">
              <div class="service_item" v-for="(item, index) in followPersonList" :key="index"
                @click="handleSelectFollowPer(index)" :class="followPersonIndex == index ? 'active' : ''">
                <div class="item_name">{{ item.name }}</div>
                <img v-if="followPersonIndex == index" class="item_icon" src="@/assets/images/select_icon.png" />
              </div>
            </div>
          </div>
        </div>
        <div class="fixCenter_btn">
          <div class="cancel_btn" @click="closeTrans">取消</div>
          <div class="confirm_btn" @click="handleSubmitTrans">确认</div>
        </div>
        <div></div>
      </div>
    </div>
    <FollowEdit :visible="followEditVisible" :billId="detailId" @close="followEditVisible = false" :max-next-follow-date="maxNextFollowDate"
      :dataSource="dataSource"></FollowEdit>

    <!-- <van-popup v-model="showSelectPicker" position="bottom">
      <van-picker show-toolbar :columns="taskTypeList" @confirm="handleSelectConfirm" @cancel="showSelectPicker = false" value-key="name" />
    </van-popup>-->

    <TaskTypeSelect :visible="showSelectPicker" @close="showSelectPicker = false" @multipleSubmit="multipleSubmit"
      :value="followParams.taskTypeId" :list="taskTypeList"></TaskTypeSelect>
    <div v-if="dataSource.oneBillStauts == '未处理'" class="phoneNumberIcon"  @click="showCall=true">
      <!-- <van-icon name="phone" size="30" color="#00BE63"/> -->
      <i class="iconfont icon-dialpad" style="color:#409eff;font-size:40px;" />
    </div>
    <van-dialog v-model="showCall" confirm-button-text="取消" confirm-button-color="#ff1100" style="width: 90vw !important;">
      <div class="calldialogClass">
        <div style="display: flex;flex-direction: row;align-items: center;justify-content: flex-end;width: 100%;">
          <div  class="dialogInput">
            <input v-model="calltel" @input="calltel = calltel.replace(/[^\d]/g, '').slice(0, 11)" maxlength="11" type="tel" placeholder="请输入客户号码" placeholder-class="input-placeholder"
             />
          </div>
          <div class="callButtonClass" style="text-align: center;"
          @click="handleTel(getAllName('车主',''),calltel)">
            拨号
          </div>
        </div>
      </div>
    </van-dialog>

    <!--  更新保养记录  -->
    <van-popup v-model="updateMaintainVisible" position="bottom" round :style="{height: '40%'}">

      <div style="font-size: 16px;margin: 20px;text-align: center;">保养记录登记</div>

      <van-field v-model="updateMaintainData.vinCode" label="车架号码" input-align="right" readonly/>
      <van-field v-model="updateMaintainData.maintainDate" label="保养时间" input-align="right" required readonly clickable @click="showPickerDate=true;" placeholder="点击选择时间">
      </van-field>
      <van-field v-model="updateMaintainData.maintainMileage" label="保养里程" input-align="right" required placeholder="请输入里程数">
        <template slot="button">km</template>
      </van-field>
      <div style="text-align: center;margin-top: 20px">
        <van-button type="info" size="large" style="width: 80%;" round @click="handleUpdateMaintainConfirm">确认</van-button>
      </div>
      <van-popup v-model="showPickerDate" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          @confirm="handleConfirmDate"
          @cancel="showPickerDate=false"
        />
      </van-popup>
    </van-popup>
  </div>
</template>

<script>
import {
  DatetimePicker,
  Dialog,
  Empty,
  Field,
  Form,
  ImagePreview,
  Notify,
  Search,
  Tab,
  Tabs,
  Toast,
  Uploader
} from 'vant'
import taskApi from '@/api/taskApi'
import repairApi from '@/api/repairApi'
import { getCookies, isPhone } from '@/utils/util.js'
import carApi from '@/api/carApi'
import aiccCallApi from '@/apiaicc/aiccCallApi'
import axios from 'axios'
import qs from 'qs'
import commonApi from '@/api/commonApi'
import FollowEdit from './components/FollowEdit.vue'
import TaskTypeSelect from './components/TaskTypeSelect'
import progressCustom from '@/components/progress/progressCustom'

const base_url = process.env.BASE_API
export default {
    name: 'taskCenterDetail',
    components: {
      Search,
      Empty,
      Field,
      Form,
      Uploader,
      DatetimePicker,
      Tab,
      Tabs,
      ImagePreview,
      Toast,
      Notify,
      Dialog,
      FollowEdit,
      TaskTypeSelect,
      progressCustom
    },
    data() {
      return {
        showTimerPicker: false,
        dataSource: {
          billId: '', //单据id
          taskTypeName: '', //任务类型
          taskName: '', //任务名称
          oneBillStatus: '', //任务一级状态
          twoBillStatus: '', //任务二级状态
          carModelName: '', //车型
          customerName: '', //客户名称
          mobile: '', //电话
          ownerName: '', //车主姓名
          ownerPhone: '', //车主电话
          contractPeople: '', //送修人姓名
          contractPhone: '', //送修电话
          taskCreateTime: '', //任务生成时间
          carNo: '', //车牌号
          carId: '', //车牌ID
          taskPerson: '', //任务跟进人
          lastFollowInTime: '', //最近跟进时间
          followType: '', //跟进方式
          taskDes: '', //任务描述
          shuldFollowTime: '',
          currCarMile: '',
          followEntry: [
            // {
            //   entryId: '1', //分录ID
            //   followDate: '08-09', //跟进日期
            //   followNumber: '2099233', //跟进编码
            //   nextFollowDate: '2023-07-07', //下次跟进日期
            //   followResult: '预约回店', //跟进结果
            //   followType: '手机', //跟进方式
            //   followSupple: '', //跟进补充
            //   failed: '', //战败原因
            //   followPerson: '张三', //跟进人
            //   followNote: '跟进备注', //跟进备注
            // },
          ],

          timer: '2022-01-01 10:20:20',
          brand: '帕拉梅拉',
          repairId: '厦门保时捷',
          userName: '张某某',
          car: '',
          vin: 'LAAHHHHASSSSSAa',
          tel: '',
          repair: '',
          mileage: '2200',
          label: ['活跃客户', '8年车', '男'],
          isFactTask: '', //是否厂家任务
          isHuiYuan: '', //是否会员客户
          isHYCar: '', //是否会员绑定车辆
          taskResult: ''
        },
        uploader: [],
        columns: [],
        showSelectPicker: false,
        disabled: false,
        detailId: '',
        tabActive: 0,
        recordList: [],
        statusList: [{
            name: '已处理',
            code: 1,
            check: false
          },
          {
            name: '未处理',
            code: 2,
            check: false
          }
        ],
        userId: getCookies('userId'), //用户ID，必填，String
        carInfo: {
          id: '', //单车id
          vinCode: '', //车架号
          fixCenterId: '', //维修中心ID
          fixCenterName: '', //维修中心名称
          fixCenterNumber: '', //维修中心编码
          serverPsnId: '', //所属服务顾问ID
          serverPsnName: '', //所属服务顾问名字
          serverPsnNumber: '', //所属服务顾问编码
          carModelId: '', //车型ID
          carModelNameName: '', //车型名称
          carModelNumber: '', //车型编码
          lastIn: '', //上次进场时间
          carMile: '', //行驶里程数
          deliverTime: '', //购车时间
          inusuranceDate: '', //保险到期时间
          repairtime: '', //保修到期时间
          label: [], //标签
          inusuranceComName: '', //保险公司
          inusuranceType: '', //保险类型
          currCarMile: '' //当前里程数
        },
        cardList: [],

        repairList: [
          // {
          //   repairNo: "SRGGGGGAAA-001",
          //   name: "一般工单",
          //   serviceName: "张某某",
          //   time: "2023-09-01 15:30",
          //   allPrice: 2020,
          //   carPrice: 1000,
          //   remark:
          //     "更换蓄电池；更换蓄电池；更换蓄电池；更换蓄电池；更换蓄电池；更换蓄电池；更换蓄电池；更换蓄电池",
          //   status: "已开工单",
          // },
        ],
        applyParams: {
          codeNo: '', //车架号或者车牌号，String，必填
          pageNo: 1, //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
          startDateIn: '', //预约开始时间，日期yyyy-MM-dd
          endDateIn: '', //预约结束时间，日期yyyy-MM-dd
          fixCenterId: '', //维修中心ID值
          serverPsnId: '', //所属服务顾问，ID值
          billStatus: '', //预约单状态
          bookingType: '', //预约单类型
          fixCenterName: '',
          serverPsnName: '',
          enDateIn: '',
          billSatus: ''
        },
        relevanceParams: {
          codeNo: '', //车架号或者车牌号，String，必填
          pageNo: 1, //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
          oneBillStatus: 'unDeal', //任务一级状态
          twoBillStatus: '', //任务二级状态
          taskTypeId: '', //任务类型ID值
          taskPersonId: '', //任务跟进人，ID值
          fixCenterId: '',
          serverPsnId: '',
          taskStartCreateTime: '',
          taskEndCreateTime: '',
          isExceed: '', //是否逾期，1为是，0为否
          isGenRepBook: '', //是否生成维修预约单
          billId: '', //本身单据ID，此为详细界面使用
          carId: '', //车辆ID，此为详细界面使用
          isFactTask: '', //是否厂家任务
          isHuiYuan: '', //是否会员客户
          isHYCar: '', //是否会员绑定车辆
          userId: getCookies('userId') //用户ID，必填，String
        },
        applyList: [],
        relevanceList: [],
        repairRequestParams: {
          codeNo: '', //车架号或者车牌号，String，必填
          pageNo: 1, //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
          startDateIn: '', //进场开始时间，日期yyyy-MM-dd
          endDateIn: '', //进场结束时间，日期yyyy-MM-dd
          startFinishDate: '', //完工开始时间，日期yyyy-MM-dd
          endFinishDate: '', //完工结束时间，日期yyyy-MM-dd
          startSettleTime: '', //结算开始时间，日期yyyy-MM-dd
          endSettleTime: '', //结算结束时间，日期yyyy-MM-dd
          workBillType: '', //工单类型，枚举
          serverPsnId: '', //维修中心ID
          fixCenterId: '', //服务顾问ID
          userId: getCookies('userId') //用户ID，必填，String
        },
        showDialog: false,
        contactList: [
          // {
          //   avatar: "车架号或者车牌号，必填车架号或者车牌号，必填",
          //   remark: "车架号或者车牌号，必填车架号或者车牌号，必填",
          //   name: "车架号或者车牌号，必填车架号或者车牌号，必填",
          //   type: 1,
          //   corpName: "厦门建发",
          // },
        ],
        tabList: [{
            name: '任务信息',
            value: 1
          },
          {
            name: '车辆信息',
            value: 2
          },

          {
            name: '联系人信息',
            value: 3
          },

          {
            name: '卡券信息',
            value: 4
          },
          {
            name: '跟进历史',
            value: 5
          }
        ],
        tabIndex: 0,
        showTablistVisible: false,
        showTransVisible: false,
        fixCenterList: [],
        fixCenterIndex: null,
        followPersonList: [],
        followPersonIndex: null,
        likeWho: '',
        likeWhoField: '',
        columnsFixCenter: [],
        followEditVisible: false,
        relatTabList: [{
            name: '未处理',
            value: 'unDeal'
          },
          {
            name: '已处理',
            value: 'isDeal'
          }
        ],
        relatTabIndex: 0,
        groupList: [],
        wxUserList: [],
        showUser: false,
        groupRefreshing: false,
        groupLoading: false,
        groupFinished: false,
        groupPageNo: 1,
        groupIsLoadData: false,

        userRefreshing: false,
        userLoading: false,
        userFinished: false,
        userPageNo: 1,
        userIsLoadData: false,
        groupData: {},
        userInfo: JSON.parse(localStorage.getItem('userInfo')),
        taskTypeList: [],
        followParams: {
          carId: '', //车辆ID，必填，
          taskTypeId: '', //任务类型ID，多个勇;隔开
          isDesc: true, //布尔类型，必填，true为倒序
          taskTypeName: ''
        },
        followRefreshing: false,
        followLoading: false,
        followFinished: false,
        followPageNo: 1,
        followHistoryList: [],
        followIsLoadData: false,
        audioStatus: "pause",
        playIndex: "-1",
        audioTime: '',
        playTime: 0, //播放进度条
        playIngTime: 0, //播放时间
        playInv: '',
        tapeFile: "",
        audioId: '',
        showCall:false,
        calltel:"",
        backIndex: 0,
        // 保养记录登记
        updateMaintainVisible: false,
        showPickerDate: false,
        updateMaintainData: {
          carId: '',
          vinCode: '',
          maintainDate: '',
          maintainMileage: '',
        },
        currentDate: new Date(),
        carInfoKhyy: {}, //运营门店维度车辆信息
        maxNextFollowDate: '', //最大下次跟进时间
      }
    },
    watch: {
      likeWho: function(nval, oval) {
        this.fixCenterIndex = null
        this.followPersonIndex = null
        this.followPersonList = []
        if (nval) {
          let newArr = this.fixCenterList.filter(item => {
            return item.name.indexOf(nval) > -1
          })
          console.log(newArr)
          this.columnsFixCenter = newArr
        } else {
          this.columnsFixCenter = this.fixCenterList
        }
      },
      audioId: function(val, nval) {
        console.log(1);
        let that = this
        if (val != nval) {
          var audios = document.getElementById('audio')
          audios.load()
          clearInterval(that.playInv)
          that.playTime = 0
          that.playIngTime = 0
          // if(nval!=''){
          //   that.audioStatus=''
          // }
        }
      },
      tabIndex: function(val, oval) {
        if (val) {
          window.scrollTo({
            top: 0,
            behavior: 'smooth'
          })
          if (val == 1 && !this.carInfo.id) {
            this.getCarInfoBase(this.dataSource.carId)
            this.getRepairworkorder()
            console.log('加载车辆信息')
          }
          if (val == 3 && this.cardList.length == 0) {
            this.getCoupon(this.dataSource.carId)
            console.log('加载卡片信息')
          }
          if (val == 4 && this.taskTypeList.length == 0) {
            this.getTaskType()
          }
        }
      }
    },

    async mounted() {
      if (localStorage.getItem('taskBillId')) {
        this.detailId = localStorage.getItem('taskBillId')
        await this.getDetail(this.detailId)
      }
      if (this.$route.query.backIndex) {
        this.backIndex = parseInt(this.$route.query.backIndex)
      } else {
        this.backIndex = 0
      }
    },
    methods: {
      handleTab(index) {
        this.tabIndex = index
        this.showTablistVisible = false
      },
      handleRelatChange(index) {
        this.relatTabIndex = index
        this.relevanceParams.oneBillStatus = this.relatTabList[index].value
        Toast.loading({
          message: '加载中...',
          forbidClick: true,
          overlay: true
        })
        this.getRelevanceTask()
      },

      // 获取外部联系人信息
      getExList(data) {
        axios({
          url: `${base_url}/proxy/ext/user/getExList`,
          method: 'post',
          data: qs.stringify(
            // { url: 'http://wycl.autocnd.com:41080/ysc/assessManageDetail' },
            {
              carNo: data.carNo,
              name: data.customerName
            }, {
              encode: false
            }
          ),
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            satoken: getCookies('token')
          }
        }).then(res => {
          if (res.data && res.data.data && res.data.data.length != 0) {
            this.contactList = res.data.data
            this.showDialog = true
          } else {
            Notify({
              type: 'danger',
              message: '未找到相关联系人'
            })
          }

          console.log('获取外部联系人信息:', res)
        })
      },
      runWxChat(data) {
        let vm = this
        axios({
          url: `${base_url}/proxy/qywx/jsdkConfig`,
          method: 'post',
          data: qs.stringify(
            // { url: 'http://wycl.autocnd.com:41080/ysc/assessManageDetail' },
            {
              url: location.href.split('?')[0],
              type: 'app'
            }, {
              encode: false
            }
          ),
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            satoken: getCookies('token')
          }
        }).then(res => {
          console.log('jsdkConfig:', res)
          let jsdk = res.data.data
          localStorage.setItem('jsdk', JSON.stringify(res.data.data))
          wx.agentConfig({
            corpid: jsdk.corpid, // 必填，企业微信的corpid，必须与当前登录的企业一致
            agentid: jsdk.agentid, // 必填，企业微信的应用id （e.g. 1000247）
            timestamp: jsdk.timestamp, // 必填，生成签名的时间戳
            nonceStr: jsdk.nonceStr, // 必填，生成签名的随机串
            signature: jsdk.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
            jsApiList: ['openEnterpriseChat'], //必填，传入需要使用的接口名称
            success: function(res) {
              console.log('agentConfig权限成功返回信息:', res)
              wx.openEnterpriseChat({
                // 注意：userIds和externalUserIds至少选填一个。内部群最多2000人；外部群最多500人；如果有微信联系人，最多40人
                userIds: '', //参与会话的企业成员列表，格式为userid1;userid2;...，用分号隔开。
                externalUserIds: data.externalUserid, // 参与会话的外部联系人列表，格式为userId1;userId2;…，用分号隔开。
                groupName: '', // 会话名称。单聊时该参数传入空字符串""即可。
                chatId: '', // 若要打开已有会话，需指定此参数。如果是新建会话，chatId必须为空串
                success: function(res) {
                  var chatId = res.chatId //返回当前群聊ID，仅当使用agentConfig注入该接口权限时才返回chatId
                  // 回调
                },
                fail: function(res) {
                  Dialog.alert({
                    title: '提示',
                    message: '调用聊天窗口打开失败，请联系信息部进行处理'
                  }).then(() => {
                    // on close
                  })
                  if (res.errMsg.indexOf('function not exist') > -1) {
                    alert('版本过低请升级')
                  }
                }
              })
            },
            fail: function(res) {
              Dialog.alert({
                title: '提示',
                message: '调用聊天窗口鉴权失败，请联系信息部进行处理'
              }).then(() => {
                // on close
              })
              console.log('agentConfig权限失败返回信息:', res)
              if (res.errMsg.indexOf('function not exist') > -1) {
                alert('版本过低请升级')
              }
            }
          })
        })
      },
      async getDetail(billId) {
        Toast.loading({
          message: '加载中...',
          forbidClick: true,
          overlay: true
        })
        await taskApi.getCustomerTaskById({
          billId,
          userId: this.userId
        }).then(async res => {
          Toast.clear()
          if (res.data) {
            res.data.isHYCar = res.data.isHYCar ? '是' : '否'
            this.dataSource = res.data

            // 最大下次跟进时间
            if (this.dataSource.taskTypeName=='续保到期提醒' && this.dataSource.renewalNode) {
              if (this.dataSource.taskExceedTime) {
                this.maxNextFollowDate = new Date(this.dataSource.taskExceedTime)
                if (this.dataSource.duration) {
                  this.maxNextFollowDate.setDate(this.maxNextFollowDate.getDate() + this.dataSource.duration)
                }
              }
            } else {
              this.maxNextFollowDate = ''
            }

            await this.getFollowCallMsg()
            // this.getCarInfoBase(this.dataSource.carId)
            // this.getApplyRecord()
            this.getRelevanceTask()
            this.getCustomerGroupInfo()
            window.scrollTo({
              top: 0,
              behavior: 'smooth'
            })
          }
        })
      },
      // 下拉刷新
      groupOnRefresh() {
        // 清空列表数据
        this.groupList = []
        this.groupFinished = false
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.groupLoading = true
        this.groupRefreshing = false
        this.groupInitData()
      },
      groupInitData() {
        this.groupPageNo = 1
        this.getCustomerGroupInfo()
      },
      // 获取群信息
      getCustomerGroupInfo() {
        if (this.groupIsLoadData) return
        this.groupIsLoadData = true
        this.groupLoading = true
        this.groupFinished = false
        taskApi
          .getCustomerGroupInfo({
            carNo: this.dataSource.carNo || 'undefined', //车牌号码，
            wetChatId: this.userInfo.corpGroup ? this.userInfo.corpGroupId : this.userInfo.corpId, //企业微信ID，
            pageNo: this.groupPageNo //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
          })
          .then(res => {
            Toast.clear()
            if (this.groupPageNo == 1) {
              this.groupList = res.data || []
            } else {
              this.groupList = this.groupList.concat(res.data || [])
            }
            this.groupPageNo += 1

            if (res.data.length < 10) {
              this.groupFinished = true
              this.groupIsLoadData = true
            }
            this.groupIsLoadData = false
            this.groupLoading = false
          })
          .catch(res => {
            this.groupLoading = false
            this.groupIsLoadData = false
          })
      },

      handleShowUser(data) {
        this.showUser = true
        this.groupData = data
        this.userInitData()
      },
      beforeClose(action, done) {
        if (action === 'confirm') {
          return done(false)
        } else {
          this.wxUserList = []
          return done()
        }
      },

      // 群成员下拉刷新
      userOnRefresh() {
        // 清空列表数据
        this.wxUserList = []
        this.userFinished = false
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.userLoading = true
        this.userRefreshing = false
        this.userInitData()
      },
      userInitData() {
        this.userPageNo = 1
        this.showUserData()
      },
      //  查看群成员
      showUserData() {
        if (this.userIsLoadData) return
        this.userIsLoadData = true
        this.userLoading = true
        this.userFinished = false
        taskApi
          .getMemberInfo({
            groupId: this.groupData.groupId, //企业群ID，必填
            // groupId: '3104758703119260', //企业群ID，必填
            pageNo: this.userPageNo //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
          })
          .then(res => {
            console.log(this.wxUserList)
            res.data.forEach(item => {
              item.memberType = item.memberType.replace('["', '')
              item.memberType = item.memberType.replace('"]', '')
            })
            Toast.clear()
            if (this.userPageNo == 1) {
              this.wxUserList = res.data || []
            } else {
              this.wxUserList = this.wxUserList.concat(res.data || [])
            }
            this.userPageNo += 1

            if (res.data.length < 10) {
              this.userFinished = true
              this.userIsLoadData = true
            }
            this.userIsLoadData = false
            this.userLoading = false
          })
          .catch(res => {
            this.userLoading = false
            this.userIsLoadData = false
          })
      },

      // 获取卡券信息
      getCoupon(id) {
        repairApi.getCoupon({
          id,
          userId: this.userId,
          isReturnInvalidCoupons: '是'
        }).then(res => {
          this.cardList = res.data
          // this.cardList = [
          //   {
          //     amount: 123,
          //     couponsName: '抵用券名字',
          //     usedDate: '2020-02-11',
          //     expireDate: '2020-02-11',
          //     ticketNumber: '1231231231231',
          //     typeName: '抵用券',
          //   },
          //   {
          //     amount: 123,
          //     couponsName: '抵用券名字',
          //     usedDate: '2020-02-11',
          //     expireDate: '2020-02-11',
          //     ticketNumber: '1231231231231',
          //     typeName: '抵用券',
          //   },
          // ]
        })
      },
      // 车辆详情
      getCarInfoBase(id) {
        Toast.loading({
          message: '加载中...',
          forbidClick: true,
          overlay: true
        })
        carApi.getCarInfoBase({
          id
        }).then(res => {
          Toast.clear()
          if (res.code == 1) {
            res.data.label = res.data.label ? res.data.label.split(';') : []
            if (res.data && res.data.label && res.data.label.length != 0) {
              res.data.label.length = res.data.label.length - 1
            }

            this.carInfo = res.data
            this.getRelevanceTask()
            this.queryCarInfoKhyy(id, this.carInfo.fixCenterId)
            // let  carInfo = {
            //   fixCenterId:this.carInfo.fixCenterId,
            //   fixCenterName: this.carInfo.fixCenterName,
            //   carModelId: this.carInfo.carModelNameId,
            //   carModelName: this.carInfo.carModelNameName,
            //   carNo: this.carInfo.carNo,
            // }
            // store.commit("setAddCarInfo",carInfo );
          }
        })
      },
      // 预约记录
      getApplyRecord() {
        repairApi
          .queryRepairBooking({
            ...this.applyParams,
            codeNo: this.dataSource.carNo || ''
          })
          .then(res => {
            this.applyList = res.data
          })
      },

      // 关联任务
      getRelevanceTask() {
        taskApi
          .getCustomerTaskList({
            ...this.relevanceParams,
            codeNo: this.dataSource.vinCode || '',
            billId: this.dataSource.billId,
            carId: this.dataSource.carId,
            fixCenterId: this.dataSource.fixCenterId
          })
          .then(res => {
            this.relevanceList = res.data
          })
      },

      // 履历
      getRepairworkorder(id) {
        carApi.getRepairworkorder({
          id: this.dataSource.carId
        }).then(res => {
          if (res.code == 0) {
            this.repairList = res.data
          }
        })
      },

      //维修预约
      applyRepair() {
        this.$router.push({
          path: 'applyRepairEdit',
          query: {
            taskId: this.dataSource.billId,
            carId: this.dataSource.carId
          }
        })
      },
      // 获取list名称
      getFieldName(list, key, val) {
        if (list && list.length > 0) {
          let obj = list.filter(item => {
            return item[key] == val
          })
          if (obj.length > 0) {
            return obj[0].name
          }
        }
        return null
      },
      // 图片预览
      previewImg() {
        ImagePreview([
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2F2020%2F555%2F900%2F14381009555_1565283795.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1693918952&t=87f1097ef82261cd8c0511a89a676704'
        ])
      },
      // 添加跟进记录
      addFollow() {
        if (this.dataSource.twoBillStatus == '邀约成功') {
          return
        }
        if (this.dataSource.isChild && new Date() < new Date(this.dataSource.shuldFollowTime)) {
          Dialog.confirm({
              message: '当前任务为子任务且未到上次设置的应跟进日期，确认现在跟进？'
            })
            .then(() => {
              this.followEditVisible = true
            })
            .catch(() => {
              // on cancel
            })
        } else {
          this.followEditVisible = true
        }
        // localStorage.setItem('followId', this.detailId)
        // this.$router.push({
        //   path: '/taskCenterEdit',
        //   // query: { billId: this.detailId },
        // })
      },
      getAllName(type,name){
        console.log(name,'getAllName');
        let allname=this.dataSource.carNo ? this.dataSource.carNo:(this.dataSource.vinCode ? "VIN:"+this.dataSource.vinCode.substring(this.dataSource.vinCode.length - 6):"")
        // let allname=this.dataSource.vinCode ? "VIN:"+this.dataSource.vinCode.substring(this.dataSource.vinCode.length - 6):""
        return allname+type+(name?name:"");
      },
      handleTel(telname, tel) {
        console.log("handleTel-isAiccUser", localStorage.getItem("isAiccUser"));
        if (localStorage.getItem("isAiccUser") + "" == "true") {
          if (this.dataSource.oneBillStauts != "未处理") {
            Toast('该任务已处理完成，无需再次联系客户')
            return
          }
          this.call(telname, tel)
        } else { //走之前的方法
          if (isPhone()) {
            window.location.href = `tel:${tel}`
          } else {
            Toast('请在手机端使用此功能')
          }
        }
      },
      goTaskDetail(data) {
        this.$router.push({
          path: '/taskCenterDetail',
          query: {
            billId: data.billId
          }
        })
      },
      goApplyDetail(data) {
        this.$router.push({
          path: '/applyRepairDetail',
          query: {
            billId: data.billId
          }
        })
      },
      goRepairDetail(data) {
        this.$router.push({
          path: '/repairOrderDetail',
          query: {
            billId: data.repairId
          }
        })
      },
      handChangeTab() {
        this.tabActive = 1
        this.$nextTick(() => {
          // 获取目标元素
          let targetElement = document.getElementById('targetId')
          // 将滚动条定位到目标元素上方
          targetElement.scrollIntoView()
        })
      },
      onClickLeft() {
        if (this.backIndex != 0) {
          this.$route.params.backIndex = this.backIndex;
          this.$router.back()
        } else {
          this.$router.go(-1)
        }
      },
      handleTaskTrans() {
        this.showTransVisible = true
        this.getMainFixCenter()
      },
      // 获取维修中心
      getMainFixCenter() {
        commonApi
          .getMainFixCenter({
            type: 'fixCenter'
          })
          .then(res => {
            this.fixCenterList = JSON.parse(JSON.stringify(res.data))
            this.columnsFixCenter = JSON.parse(JSON.stringify(res.data))
          })
      },
      // 获取跟进人员
      handleSelectFixCenter(index) {
        this.fixCenterIndex = index
        this.followPersonIndex = null
        commonApi
          .getEmpPerson({
            fixCenterId: this.fixCenterList[index].billId,
            type: 'followPerson'
          })
          .then(res => {
            this.followPersonList = res.data
          })
      },
      handleSelectFollowPer(index) {
        this.followPersonIndex = index
      },
      closeTrans() {
        this.showTransVisible = false
        this.fixCenterIndex = null
        this.followPersonIndex = null
      },
      handleSubmitTrans() {
        console.log(this.fixCenterIndex)
        console.log(this.followPersonIndex)

        if (!this.fixCenterIndex && this.fixCenterIndex != 0) {
          Toast('请选择维修中心')
          return
        }
        if (!this.followPersonIndex && this.followPersonIndex != 0) {
          Toast('请选择跟进人员')
          return
        }
        taskApi
          .customerTaskFollow({
            fixCenterId: this.fixCenterList[this.fixCenterIndex].billId,
            followPersonID: this.followPersonList[this.followPersonIndex].billId,
            billIds: this.detailId
          })
          .then(res => {
            if (res.code == 1) {
              Notify({
                type: 'success',
                message: '更新成功'
              })
              this.showTransVisible = false
              this.fixCenterIndex = null
              this.followPersonIndex = null
              this.getDetail(this.detailId)
            } else {
              Notify({
                type: 'danger',
                message: res.errorMessage
              })
            }
          })
      },
      isDateGreater(dateStr1, dateStr2) {
        const date1 = new Date(dateStr1)
        const date2 = new Date(dateStr2)
        return date1 > date2
      },
      handleDealTask(data) {
        // data &&
        //     data.rootId == this.dataSource.billId &&
        //     data.sourceBillId == this.dataSource.billId &&
        if (data.oneBillStatus == '未处理') {
          if (this.isDateGreater(data.shuldFollowTime, new Date()) && data.sourceBillId == this.dataSource.billId) {
            // 应跟进时间大于当前日期
            Toast('该任务为当前任务所生成的子任务，尚未到达处理时间，可暂不处理')
          } else {
            this.getDetail(data.billId)
          }
        }
      },
      // 切换页签
      goHistory() {
        this.tabIndex = 4
      },
      // 获取任务类型
      getTaskType() {
        commonApi.getTaskType({}).then(res => {
          this.taskTypeList = res.data
          this.taskTypeList.unshift({
            name: '全部',
            billId: ''
          })
          this.followParams.taskTypeName = this.taskTypeList[0].name
          this.followParams.taskTypeId = this.taskTypeList[0].billId
          this.followInitData()
        })
      },
      // 打开任务类型下拉
      handleSelectTaskType() {
        this.showSelectPicker = true
      },

      // 选择下拉确认
      handleSelectConfirm(value, index) {
        this.followParams.taskTypeName = value.name
        this.followParams.taskTypeId = value.billId
        this.showSelectPicker = false
        this.followInitData()
      },
      handleDateOrder() {
        this.followParams.isDesc = !this.followParams.isDesc
        this.followInitData()
      },

      // 历史跟进数据刷新
      followOnRefresh() {
        // 清空列表数据
        this.followHistoryList = []
        this.followFinished = false
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.followLoading = true
        this.followRefreshing = false
        this.followInitData()
      },
      followInitData() {
        this.followPageNo = 1
        this.getFollowData()
        let followId = document.getElementById('followId')

        followId.scrollTo({
          top: 0,
          behavior: 'smooth'
        })
      },
      //  获取历史跟进
      async getFollowData() {
        if (this.followIsLoadData) return
        this.followIsLoadData = true
        this.followLoading = true
        this.followFinished = false
        Toast.loading('数据加载中...')
        this.followParams.carId = this.dataSource.carId
        taskApi
          .getCustomerTaskHisFollow({
            pageNo: this.followPageNo, //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
            ...this.followParams
          })
          .then(async res => {
            Toast.clear()
            if (this.followPageNo == 1) {
              await this.getFollowHistoryCalls(res.data)
              this.followHistoryList = res.data || []
            } else {
              await this.getFollowHistoryCalls(res.data)
              this.followHistoryList = this.followHistoryList.concat(res.data || [])
            }
            console.log(this.followHistoryList, 'followHistoryList-data');
            this.followPageNo += 1

            if (res.data.length < 10) {
              this.followFinished = true
              this.followIsLoadData = true
            }
            this.followIsLoadData = false
            this.followLoading = false
          })
          .catch(res => {
            this.followLoading = false
            this.followIsLoadData = false
          })
      },

      // 多选确认
      multipleSubmit(data) {
        console.log('data', data)
        if (data && data.length != 0) {
          let arr = []
          const containsValue = data.some(item => item.billId == '')
          if (containsValue) {
            this.followParams.taskTypeName = '全部'
            this.followParams.taskTypeId = ''
          } else {
            this.followParams.taskTypeName = data.map(item => item.name).join(',')
            let ids = data.map(item => item.billId)
            ids.forEach(item => {
              arr.push(item)
            })
            this.followParams.taskTypeId = arr.join(';')
          }

          this.followInitData()
        }
      },
      async getFollowHistoryCalls(data) {
        let that = this
        if (data != null && data.length > 0) {
          for (var i = 0; i < data.length; i++) {
            var billId = data[i].billId
            data[i].calls = []
            await aiccCallApi.getFollowCall({
              billId: billId
            }).then((res) => {
              if (res.code == 0) {
                let calls = res.data
                if (calls!=null && calls.length>0) {
                  calls.forEach((item) => {
                    this.getAudioLength(item)
                  })
                  data[i].calls = calls
                }
                console.log('getFollowHistoryCalls:', that.dataSource);
              }
            })
            console.log(data, 'getFollowHistoryCalls');
          }
        }
      },
      async getFollowCallMsg() {
        let that = this
        if (that.dataSource.followEntry != null && that.dataSource.followEntry.length > 0) {
          for (var i = 0; i < that.dataSource.followEntry.length; i++) {
            var billId = that.dataSource.followEntry[i].parentId
            that.dataSource.followEntry[i].calls = []
            await aiccCallApi.getFollowCall({
              billId: billId
            }).then((res) => {
              if (res.code == 0) {
                let calls = res.data
                if (calls!=null && calls.length>0) {
                  calls.forEach((item) => {
                    this.getAudioLength(item)
                  })
                  that.dataSource.followEntry[i].calls = calls
                }
                console.log('data:', that.dataSource);
              }
            })
            console.log(that.dataSource, 'dataSource');
          }
        }
      },
      call(telname, tel) {
        let vm = this
        if (tel === "" || tel === null) {
          Dialog.alert({
            title: '',
            message: '号码不能为空'
          }).then(() => {
            // on close
          })
          return
        } else { //手机
          if (!vm.validMobile(tel)) {
            Dialog.alert({
              title: '',
              message: '号码不正确'
            }).then(() => {
              // on close
            })
            return
          }
        }
        let isPc = vm.checkIsPC()
        // isPc = true
        Toast.loading({
          message: '拨打中，请稍后...',
          forbidClick: true,
          overlay: true
        })
        if (isPc) { //如果是PC端
          vm.doPcCallOut(telname, tel, isPc)
        } else { //唤起小程序
          vm.doMobileCallout(telname, tel, isPc)
        }
      },
      doMobileCallout(telname, tel, isPc) {
        let vm = this
        aiccCallApi.callOut({
          customerNumber: tel,
          customerName: telname,
          billId: this.dataSource.billId,
          billOrgId: null,
          carId: this.dataSource.carId,
          carModelName: this.dataSource.carModelName,
          fixCenterId: this.dataSource.fixCenterId,
          fixCenterName: this.dataSource.fixCenterName,
          insCmpName: this.dataSource.insCmpName,
          type: isPc == true ? "pc" : "phone"
        }).then((callres) => {
          console.log('AICC获取tokenInfo成功返回信息:', callres)
          if (callres.code == 0) {
            vm.tokenInfo = callres.data
            vm.toMiniprogram()
          } else {
            Toast.clear()
            Dialog.alert({
              title: '',
              message: callres.msg
            }).then(() => {
              // on close
            })
            if (res.code == -900 && res.msg == '坐席未绑定手机号码,请先绑定手机号码') {
              this.$router.push("/seatPhone");
            }
          }
        })
      },
      // 评估申请跳转小程序
      toMiniprogram() {
        let vm = this
        axios({
          url: `${base_url}/proxy/qywx/jsdkConfig`,
          method: 'post',
          data: qs.stringify(
            // { url: 'http://wycl.autocnd.com:41080/ysc/assessManageDetail' },
            {
              url: location.href.split('?')[0],
              type: 'app'
            }, {
              encode: false
            },
          ),
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            satoken: getCookies('token'),
          },
        }).then((res) => {
          console.log('jsdkConfig:', res)
          let jsdk = res.data.data
          localStorage.setItem('jsdk', JSON.stringify(res.data.data))
          wx.agentConfig({
            corpid: jsdk.corpid, // 必填，企业微信的corpid，必须与当前登录的企业一致
            agentid: jsdk.agentid, // 必填，企业微信的应用id （e.g. 1000247）
            timestamp: jsdk.timestamp, // 必填，生成签名的时间戳
            nonceStr: jsdk.nonceStr, // 必填，生成签名的随机串
            signature: jsdk.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
            jsApiList: ['launchMiniprogram'], //必填，传入需要使用的接口名称
            success: function(res) {
              console.log('agentConfig权限成功返回信息:', res)
              // wx9e482fe1abf18c87
              // appid: 'wx02e51afc29cecca4', // 需跳转的小程序appid
              wx.invoke(
                'launchMiniprogram', {
                  appid: vm.tokenInfo.appId, // 需跳转的小程序appid
                  // appid: 'wx9e482fe1abf18c87', // 测试跳转的appid
                  path: `pages/calling/calling?token=${vm.tokenInfo.token}&enterpriseId=${vm.tokenInfo.enterpriseId}&cno=${vm.tokenInfo.cno}&called_number=${vm.tokenInfo.calledNumber}&platform=${vm.tokenInfo.platform}&type=1`, // 所需跳转的小程序内页面路径及参数
                },
                function(res) {
                  Toast.clear()
                  if (res.err_msg == 'launchMiniprogram:ok') {
                    // 正常
                  } else {
                    // 错误处理
                  }
                },
              )
            },
            fail: function(res) {
              Toast.clear()
              console.log('agentConfig权限失败返回信息:', res)
              if (res.errMsg.indexOf('function not exist') > -1) {
                alert('版本过低请升级')
              }
            },
          })
        })
      },
      doPcCallOut(telname, tel, isPc) {
        aiccCallApi.callOut({
          customerNumber: tel,
          customerName: telname,
          billId: this.dataSource.billId,
          billOrgId: null,
          carId: this.dataSource.carId,
          carModelName: this.dataSource.carModelName,
          fixCenterId: this.dataSource.fixCenterId,
          fixCenterName: this.dataSource.fixCenterName,
          insCmpName: this.dataSource.insCmpName,
          type: isPc == true ? "pc" : "phone"
        }).then((res) => {
          Toast.clear()
          if (res.code == 0) {
            Notify({
              type: 'success',
              message: '呼叫成功，请稍后'
            })

          } else {
            Dialog.alert({
              title: '',
              message: res.msg
            }).then(() => {
              // on close
            })
            if (res.code == -900 && res.msg == '坐席未绑定IP话机,请先绑定IP话机') {
              this.$router.push("/seatPhone");
            }
          }
        })
      },
      validMobile(str) {
        return /^1[3456789]\d{9}$/.test(str) || /^0[0-9-]{10,13}$/.test(str)
      },
      checkIsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
          "SymbianOS", "Windows Phone",
          "iPad", "iPod"
        ];
        var flag = true;
        for (var v = 0; v <= Agents.length; v++) {
          if (userAgentInfo.indexOf(Agents[v]) >= 0) {
            flag = false;
            break;
          }
        }
        return flag;
      },
     async play(data, index) {
        let that = this
        if (data.localRecordFile) {
          let that = this
          let param = {
            id: data.id,
            type: 1
          }
          aiccCallApi.getCallTap(param).then((res) => {
            if (res.code == 0) {
              that.tapeFile = res.data
              console.log("tapeFile-", this.tapeFile);
              that.audioId = that.tabIndex + '-' + index
              console.log("tapeFile-", this.tapeFile);
              that.audioStatus = index
              var audios = document.getElementById('audio')
              // audio.src=data.localRecordFile
              // audios.src=this.tapeFile
              that.playIndex = index
              console.log(that.audioStatus);

              setTimeout(() => {
                audios.play()
                that.playInv = setInterval(() => {
                  if (that.playIngTime >= data.bridgeDuration) {
                    clearInterval(that.playInv);
                    that.audioStatus = ''
                    audios.pause()
                    that.playTime = 0
                    that.playIngTime = 0
                    that.playIndex = "-1"
                  } else {
                    that.playIngTime++
                    // that.playTime += 100 / audios.duration
                    if (that.playTime < 100) {
                      that.playTime += 100 / data.bridgeDuration
                    } else {
                      that.playTime = 100
                    }
                  }
                }, 1000);
              }, 500);

            } else {
              Dialog.alert({
                title: '',
                message: res.msg
              }).then(() => {
                // on close
              })

            }
          })

        } else {
          Dialog.alert({
            title: '',
            message: "该记录暂无音频"
          }).then(() => {
            // on close
          })
        }

      },
      stop(index) {
        let that = this
        console.log(that.playIndex);
        var audios = document.getElementById('audio')
        audios.pause()
        that.audioStatus = index
        clearInterval(that.playInv);
        this.playIndex = '-1'
      },
      getAudioTime() {

        var audios = document.getElementById('audio')
        let long = parseInt(audios.duration)
        let min = parseInt(long / 60 % 60)
        let seconds = Math.ceil(long % 60)
        let formateSeconds = seconds > 59 ? 59 : seconds
        this.audioTime = `${min<10?'0'+min:min}:${formateSeconds<10?'0'+formateSeconds:formateSeconds}`
      },
      formateTime(time) {
        let long = parseInt(time)
        let min = parseInt(long / 60 % 60)
        let seconds = Math.ceil(long % 60)
        let formateSeconds = seconds > 59 ? 59 : seconds
        return `${min<10?'0'+min:min}:${formateSeconds<10?'0'+formateSeconds:formateSeconds}`
      },
      /**
       * @param {Object} pre 拖动
       */
      updateAudio(pre, tab, call) {
        // setTimeout(function() {
        let that = this
        let id = tab + call.id
        console.log(that.playIndex);
        that.stop(id)
        that.playIndex = id
        that.audioId = that.tabIndex + '-' + id
        var audios = document.getElementById('audio')
        that.tapeFile = call.localRecordFile
        // let time = Math.round((audios.duration * pre * 0.01).toFixed(2))
        setTimeout(function() {
          let time = audios.duration * pre * 0.01
          audios.currentTime = time.toFixed(2);
          that.playIngTime = Math.round(time)
          that.playTime = Math.round(pre)
          that.audioStatus = id
          audios.play()
          that.playInv = setInterval(() => {
            if (that.playIngTime >= call.bridgeDuration) {
              clearInterval(that.playInv);
              that.audioStatus = id
              audios.pause()
              that.playTime = 0
              that.playIngTime = 0
            } else {
              that.playIngTime++
              // that.playTime += 100 / audios.duration
              if (that.playTime < 100) {
                that.playTime += 100 / call.bridgeDuration
              } else {
                that.playTime = 100
              }
            }
          }, 1000);
        }, 500);
      },
      goAsr(data) {
        this.$router.push({
          path: '/asr',
          query: {
            billId: data.id,
            billType: 1
          },
        })
      },
      openChat(item) {
        axios({
          url: `${base_url}/proxy/qywx/jsdkConfig`,
          method: 'post',
          data: qs.stringify(
            // { url: 'http://wycl.autocnd.com:41080/ysc/assessManageDetail' },
            { url: location.href.split('?')[0], type: 'app' },
            { encode: false },
          ),
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            satoken: getCookies('token'),
          },
        }).then((res) => {
          console.log('jsdkConfig:', res)
          let jsdk = res.data.data
          wx.agentConfig({
            corpid: jsdk.corpid, // 必填，企业微信的corpid，必须与当前登录的企业一致
            agentid: jsdk.agentid, // 必填，企业微信的应用id （e.g. 1000247）
            timestamp: jsdk.timestamp, // 必填，生成签名的时间戳
            nonceStr: jsdk.nonceStr, // 必填，生成签名的随机串
            signature: jsdk.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
            jsApiList: ['openExistedChatWithMsg'], //必填，传入需要使用的接口名称
            success: function (res) {
              console.log('agentConfig权限成功返回信息:', res)
              wx.invoke("openExistedChatWithMsg", {
                chatId: item.groupChatId,
                // msg: {
                // 	msgtype: "link",
             	  // }
              },function(res){
                if (res.err_msg == "openExistedChatWithMsg:ok") {
                } else {
                  Notify({
                    type: 'warning',
                    message: '您暂时无权限打开该群聊！',
                  })
                }
              });
            },
            fail: function (res) {
              console.log('agentConfig权限失败返回信息:', res)
              if (res.errMsg.indexOf('function not exist') > -1) {
                alert('版本过低请升级')
              }
            },
          })
        })
      },

      // 保养记录登记
      showUpdateMaintain(data) {
        Object.keys(this.updateMaintainData).forEach(key => delete this.updateMaintainData[key])
        this.updateMaintainVisible = true
        this.updateMaintainData.carId = data.id
        this.updateMaintainData.vinCode = data.vinCode
      },
      handleUpdateMaintainConfirm() {
        if (!this.updateMaintainData.maintainDate) {
          Notify({ type: 'danger', message: '请选择保养日期' })
          return
        }
        if (!this.updateMaintainData.maintainMileage) {
          Notify({ type: 'danger', message: '请输入保养里程' })
          return
        }
        carApi
          .carMaintainRecordAddNew({
            ...this.updateMaintainData
          })
          .then((res) => {
            if (res.code == 1) {
              Notify({ type: 'success', message: '新增成功' })
              // this.initData()
            } else {
              Notify({ type: 'danger', message: res.msg })
            }
          })
        this.updateMaintainVisible = false
      },
      handleConfirmDate(time) {
        this.updateMaintainData.maintainDate = this.formatDate(time)
        this.showPickerDate = false
      },
      formatDate(date) {
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        if (month < 10) {
          month = '0' + month
        }
        if (day < 10) {
          day = '0' + day
        }
        return year + '-' + month + '-' + day
      },
      async getAudioLength(record) {
        let param = {
          id: record.id,
          type: record.fileStatus
        }
        await aiccCallApi.getCallTap(param).then((res) => {
          console.log(res.data)
          const audio = new Audio(res.data)
          audio.addEventListener('loadedmetadata', function() {
            console.log('audio loadedmetadata', audio.duration)
            record.bridgeDuration = audio.duration
          })
        })
      },
      queryCarInfoKhyy(carId, fixCenterId) {
        carApi.queryCarInfoKhyy({carId: carId, org_Id: fixCenterId}).then((res) => {
          if (res.code == 1) {
            this.carInfoKhyy = res.data[0]
          }
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  //@font-face {
  //  font-family: 'Alibaba';
  //  src: url('~@/assets/fonts/alibaba2.ttf');
  //}

  body {
    //font-family: 'Alibaba';
  }

  .registerDetail {
    //font-family: 'Alibaba';
    // min-height: 100vh;
  }

  .flex {
    display: flex;
    align-items: center;
  }

  .registerDetail {
    background: #f3f3f3;
    overflow: auto;

    .detail_header {
      justify-content: space-between;
      margin: 0.2rem 0.2rem;
      border-radius: 5px;
      background: #fff;
      padding: 0.3rem;
      position: relative;
      overflow: hidden;

      .factTask {
        position: absolute;
        right: -9px;
        top: -8px;
        color: #fff;
        background: #eb1717;
        font-size: 0.24rem;
        padding: 2px 10px;
        padding-top: 10px;
        transform: rotate(30deg);
      }

      .detail_header_lt {
        .carNo {
          font-size: 0.32rem;
          font-weight: bold;
          margin-bottom: 0.2rem;
          align-items: center;

          .icon-right {
            margin-left: 0.2rem;
            color: #409eff;
          }

          .status {
            border: 1px solid #299a00;
            color: #299a00;
            padding: 0.05rem 0.2rem;
            text-align: center;
            font-size: 0.22rem;
            border-radius: 3px;
            margin-left: 0.2rem;
          }
        }

        .hank {
          font-size: 0.28rem;
          color: #666;

          .name {
            border-right: 2px solid #ccc;
            padding-right: 0.1rem;
            margin-right: 0.1rem;

            &:last-child {
              border: 0;
            }
          }

          .isVip {
            background: #f59301;
            color: #fff;
            font-size: 0.24rem;
            border-radius: 2px;
            padding: 2px 10px;
          }
        }
      }

      .detail_header_rt {
        justify-content: flex-start;

        .con_txt {
          font-size: 0.26rem;
          color: #161616;
          color: #35bc04;
        }

        .txt {
          font-size: 0.24rem;
          color: #161616;
        }

        .icon-tel {
          font-size: 0.64rem;
          color: #35bc04;
          margin-right: 0.1rem;
          // position: relative;
          // top: -2px;
          // color: #fff;
          // background: #35bc04;
          // font-size: 0.32rem;
          // padding: 0.1rem;
          // border-radius: 50%;
          // margin-right: 0.1rem;
        }
      }
    }

    .formData {
      background: #fff;
    }
  }

  .labelList {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .label_item {
    color: #299a00;
    border: 1px solid #299a00;
    border-radius: 4px;
    margin-right: 0.1rem;
    padding: 0.01rem 0.2rem;
    font-size: 0.2rem;
    margin-bottom: 0.1rem;

    &:last-child {
      margin-right: 0;
    }
  }

  .tabCar {
    margin-top: 0.1rem;
  }

  // 卡券
  .cardList {
    margin: 0.1rem 0.2rem 0.3rem 0.2rem;
    box-sizing: border-box;

    .cardItem {
      background: #fff;
      border-radius: 10px;
      box-sizing: border-box;
      overflow: hidden;
      margin-bottom: 0.2rem;

      .box {
        overflow: hidden;

        .cardItem_lt {
          padding: 0.3rem 0.2rem;
          text-align: center;
          box-sizing: content-box;
          background: #409eff;
          color: #fff;
          overflow: hidden;
          height: 1.4rem;
          width: 30%;

          .price_icon {
            font-size: 0.3rem;
            color: #fff;
            text-align: center;
            padding-top: 0.2rem;

            .txt {
              font-size: 0.6rem;
              font-weight: bold;
            }
          }

          .name {
            font-size: 0.28rem;
            color: #fff;
            margin-top: 0.1rem;
          }

          .price {
            color: #fff;
          }
        }

        .cardItem_rt {
          padding: 0.3rem;
          border-bottom: 1px dashed #ccc;
          overflow: hidden;
          height: 1.4rem;
          width: 70%;

          .label_name {
            .label_txt {
              background: #ff3415;
              color: #fff;
              border-radius: 3px;
              text-align: center;
              padding: 0.07rem 0.2rem;
              font-size: 0.24rem;
              margin-right: 0.1rem;
            }

            .label_txt1 {
              color: #333;
              font-size: 0.28rem;
              font-weight: bold;
            }
          }

          .label_time {
            margin-top: 0.2rem;
            font-size: 0.26rem;
            color: #666;
          }
        }
      }

      .cardNo {
        padding: 0.2rem 0.3rem 0.2rem 0.2rem;
        font-size: 0.28rem;
        color: #333;
      }
    }
  }

  // 维修
  .repairData {
    margin: 0.1rem 0.2rem 0.3rem 0.2rem;
    box-sizing: border-box;
    overflow: hidden;

    .repairItem {
      background: #fff;
      overflow: hidden;
      border-radius: 5px;
      padding: 0.2rem;
      margin-bottom: 0.2rem;

      .item_title {
        justify-content: space-between;
        padding: 0.1rem 0.1rem 0.2rem 0.3rem;
        border-bottom: 1px solid #f1f1f1;
        font-size: 0.28rem;
        margin-bottom: 0.3rem;
        position: relative;

        &::before {
          content: '';
          display: block;
          width: 3px;
          height: 15px;
          background: #409eff;
          position: absolute;
          left: 0;
          top: 5px;
        }
      }

      .item_content {
        padding: 0 0.3rem;

        .item_contentbox {
          justify-content: space-between;
        }

        .item_data {
          font-size: 0.28rem;
          margin-bottom: 0.2rem;
          display: flex;

          &.item_remark {
            display: block;
          }

          .item_data_label {
            color: #808080;
          }

          .item_data_value {
            color: #333;

            &.txt {
              line-height: 0.32rem;
            }
          }
        }

        .item_data_width {
          float: left;
        }
      }
    }
  }

  // 联系人
  .contactbox {
    margin: 0.1rem 0.2rem 0.3rem 0.2rem;

    .contactItem {
      justify-content: space-between;
      background: #fff;
      padding: 0.2rem;
      margin-bottom: 0.1rem;
      border-radius: 4px;

      .contact_lt {
        .header {
          margin-bottom: 0.2rem;
          color: #333;

          .txt {
            font-size: 0.2rem;
            margin-right: 0.2rem;
            background: #409eff;
            padding: 0.1rem 0.2rem;
            border-radius: 4px;
            color: #fff;
          }

          .name {
            font-size: 0.28rem;
          }
        }

        .tel {
          font-size: 0.3rem;
          color: #333;
        }
      }

      .contact_rt {
        .icon-wx {
          font-size: 0.7rem;
          color: #409eff;
        }

        .icon-tel {
          font-size: 0.64rem;
          color: #35bc04;
          margin-right: 0.1rem;
          // font-size: 0.36rem;
          // background: #35bc04;
          // color: #fff;
          // text-align: center;
          // padding: 0.1rem;
          // border-radius: 50%;
          // position: relative;
          // top: -6px;
          // margin-right: 0.1rem;
        }
      }
    }
  }

  .addBtn {
    position: fixed;
    bottom: 0rem;
    width: 100%;
    z-index: 9;
    height: 54px;
    background: #fff;
    padding-top: 14px;

    .orderItem_filebox {
      margin: auto;
      text-align: center;
      font-size: 15px;
      color: #fff;
      padding: 12px;
      border-radius: 50px;
      width: 162px;
      font-weight: 600;
      background: linear-gradient(316deg, #3975c6 0%, #71a4ea 100%);
      border-radius: 156px 156px 156px 156px;

      &.btn_disable {
        background: #b8b8b8;
      }
    }
  }

  .relationTitle {
    padding-left: 0.2rem;
    border-left: 4px solid #409eff;
    margin-left: 0.3rem;
    margin-top: 0.3rem;
    font-size: 0.26rem;
    margin-bottom: 0.2rem;
  }

  .orderList {
    margin: 0.2rem;
    overflow: hidden;

    // padding-bottom: 1.5rem;
    .orderItem {
      padding: 0.3rem;
      background: #fff;
      border-radius: 10px;
      margin-bottom: 0.3rem;

      .orderItem_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.3rem;
        padding-bottom: 0.2rem;
        border-bottom: 1px solid #f6f6f6;
        position: relative;

        .orderItem_lt {
          .carNo {
            font-size: 0.3rem;
            color: #333;
            margin-right: 0.2rem;
            font-weight: bold;
          }

          .carStatus {
            background: #35bc04;
            color: #fff;
            border-radius: 4px;
            padding: 0.1rem 0.2rem;
            font-size: 0.24rem;
            text-align: center;
            width: 1rem;
            margin-top: 0.1rem;
          }
        }

        .orderItem_rt {
          display: flex;
          align-items: center;
          align-self: center;
          justify-content: flex-start;
          color: #666;
          font-size: 0.28rem;

          .txt {
            font-size: 0.28rem;
            color: #161616;
          }

          .icon-tel {
            font-size: 0.64rem;
            color: #35bc04;
            margin-right: 0.1rem;
            // color: #fff;
            // background: #35bc04;
            // font-size: 0.32rem;
            // padding: 0.1rem;
            // border-radius: 50%;
            // margin-right: 0.2rem;
          }

          .icon-wx {
            color: #409eff;
            font-size: 0.65rem;
          }
        }
      }

      .orderItem_content {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: center;

        .orderItem_data {
          display: flex;
          justify-content: flex-start;
          // align-items: center;
          width: 50%;
          margin-bottom: 0.2rem;
          font-size: 0.28rem;
          box-sizing: content-box;
          color: #333;

          .order_label {
            font-size: 0.28rem;
            color: #333;
            width: 70px;
            margin-right: 10px;
          }

          .txt {
            font-size: 0.28rem;
            color: #666;
            flex: 1;
            // white-space: nowrap;
            // overflow: hidden;
            // text-overflow: ellipsis;
          }

          &.time {
            width: 100%;
          }
        }
      }

      .orderItem_file {
        background: #ebebeb;
        color: #333;
        border-radius: 5px;
        padding: 0.2rem 0;
        text-align: center;
        width: 100%;
        font-size: 0.28rem;
        display: flex;
        align-items: center;
        justify-content: center;

        .file_item {
          width: 33.33%;
          border-right: 1px solid #ccc;

          .icon-tel {
            font-size: 0.34rem;
            color: #35bc04;
            margin-right: 0.1rem;
          }

          .icon-mileage {
            font-size: 0.4rem;
            color: #409eff;
            margin-right: 0.1rem;
            position: relative;
            top: 0.04rem;
          }

          .icon-gw {
            font-size: 0.4rem;
            color: #409eff;
            margin-right: 0.1rem;
            position: relative;
            top: 0.04rem;
          }

          &:last-child {
            border: none;
          }
        }
      }
    }
  }

  .noContent {
    margin-top: 2rem;
  }

  .martop {
    margin-top: 0rem !important;
  }

  .contact_list {
    padding: 0.5rem 0.2rem 0 0.2rem;

    .contact_item {
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .contact_lt {
      font-size: 0.28rem;
      color: #23ec1c;

      .contact_header {
        width: 30px;
        height: 30px;
        display: block;
        border-radius: 5px;
        margin-right: 5px;
      }

      .contact_name {
        font-size: 0.28rem;
        color: #333;
        margin-left: 5px;
        flex: 1;
      }

      .contact_com {
        color: #f65e07;
        font-size: 0.28rem;
      }

      .contact_com_wx {
        color: #23ec1c;
        font-size: 0.28rem;
        width: 50px;
        text-align: center;
      }
    }

    .membot {
      border-bottom: 1px solid #f1f1f1;
      padding-bottom: 10px;
      margin-bottom: 10px;
    }

    .contact_type {
      font-size: 14px;
      color: #999;
      margin-left: 5px;
    }

    .contact_btn {
      background: #409eff;
      color: #fff;
      padding: 5px 0;
      text-align: center;
      border-radius: 3px;
      font-size: 0.28rem;
      width: 60px;
    }
  }

  .task_header {
    background: url('~@/assets/images/title_bg.png') no-repeat center;
    font-size: 0.24rem;
    height: 50px;
    background-size: 100% 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;

    .top_title {
      position: relative;
      width: 100%;
      height: 50px;

      .top_title_back {
        position: absolute;
        left: 10px;
        line-height: 50px;
        color: #fff;
      }

      .top_title_val {
        text-align: center;
        line-height: 50px;
        color: #fff;
        font-weight: bold;
        font-size: 16px;
      }

      .task_transbox {
        position: absolute;
        right: 10px;
        top: 5px;
        color: #fff;
        z-index: 10;
        font-weight: 400;
        font-size: 10px;
        text-align: center;

        .task_trans {
          width: 24px;
          display: block;
          margin: auto;
        }
      }
    }

    .task_header_data {
      .task_header_date {
        margin-bottom: 10px;
        display: flex;
        align-items: center;

        .task_header_date_w {
          width: 12.5%;
        }

        .task_header_date_item {
          width: 12.5%;
          text-align: center;
          color: #fff;
          font-size: 14px;
        }
      }

      .task_header_followData {
        display: flex;
        align-items: center;
        color: #fff;
        margin-bottom: 10px;

        .task_header_followData_tt {
          width: 12.5%;
          text-align: center;
        }

        .task_header_followData_item {
          width: 12.5%;
          text-align: center;
          font-size: 12px;
          font-weight: bold;
        }
      }
    }
  }

  .task_detail {
    position: fixed;
    top: 50px;
    left: 0;
    width: 100%;
    z-index: 100;

    .task_detail_header {
      padding: 17px 0 10px;
      background: #fff;
      // margin-bottom: 10px;
      border-bottom: 1px solid #f1f1f1;
      position: relative;

      .title {
        text-align: center;
        //font-family: Alibaba;
        font-weight: 700;
        font-size: 16px;
        color: #333333;
        max-width: 60%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin: auto;
      }

      .name {
        display: flex;
        text-align: center;
        width: 100%;
        justify-content: center;
        margin-top: 10px;

        .txt {
          //font-family: Alibaba;
          font-weight: 400;
          font-size: 12px;
          color: #999999;
          text-align: center;
          margin-right: 10px;
        }
      }

      .status {
        //font-family: Alibaba;
        font-weight: 700;
        font-size: 12px;
        text-align: center;
        position: absolute;
        top: 16px;
        right: 10px;
        border-radius: 2px;
        padding: 5px;
        display: flex;
        align-items: center;

        .status_icon {
          width: 12px;
          margin-right: 4px;
        }

        &.status1 {
          color: #ff1100;
          background: rgba(255, 48, 33, 0.2);
        }

        &.status2 {
          color: #00b42a;
          background: #e8ffea;
        }
      }
    }

    .tabbox {
      // padding: 0 10px;
      padding-top: 15px;
      border-top: 1px solid #f7f5f5;
      margin-top: 15px;
      position: relative;
      width: 7.5rem;
      overflow: hidden;

      .tab_list {
        width: 10rem;
        overflow-x: auto;
        clear: both;

        .tab_item {
          font-weight: 400;
          font-size: 14px;
          color: #4e5969;
          text-align: center;
          background: #f7f7f7;
          border-radius: 32px;
          padding: 8px 16px;
          margin-right: 6px;
          cursor: pointer;
          float: left;

          &:last-child {
            margin-right: 0;
          }

          &.active {
            color: #165dff;
            text-align: center;
            background: #d8e3ff;
          }
        }
      }
    }
  }

  .pop_tab {
    padding: 25px 32px;

    .title {
      font-weight: 700;
      font-size: 12px;
      color: #333333;
      line-height: 17px;
      text-align: left;
      margin-bottom: 20px;
    }

    .pop_tablist {
      width: 100%;

      .pop_tab_item {
        background: #f9f9f9;
        border-radius: 62px 62px 62px 62px;
        font-weight: 500;
        font-size: 10px;
        color: #4b4b4b;
        text-align: center;
        width: 30%;
        border: 1px solid #f9f9f9;
        margin-right: 5%;
        box-sizing: border-box;
        float: left;
        margin-bottom: 10px;
        padding: 7px 0;
        cursor: pointer;

        &:nth-child(3n) {
          margin-right: 0;
        }

        &.active {
          color: #ff4444;
          background: #ffd8d3;
          border-radius: 62px 62px 62px 62px;
          border: 1px solid #dd5953;
        }
      }
    }
  }

  .tabBarBox {
    position: relative;

    .icon_menubox {
      position: fixed;
      right: 0px;
      top: 116px;
      background: #fff;
      width: 50px;
      height: 50px;
      cursor: pointer;
      z-index: 11;
    }

    .icon_menu {
      width: 27px;
      margin-left: 10px;
      // position: relative;
      // top: 0px;
      display: block;
      margin: auto;
      padding-top: 10px;
    }
  }

  .detailbox_item {
    margin-top: 10px;
    background: #fff;
    padding: 10px;

    .detailbox_item_title {
      font-size: 16px;
      font-weight: 700;
      color: #1d2129;
      margin-bottom: 14px;
      background: url('~@/assets/images/ttbg.png') no-repeat left bottom;
      background-size: 32px 6px;
    }

    .detailbox_item_titlebox {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .hisBtn {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        align-items: center;
        margin-bottom: 14px;
        color: #165dff;
        cursor: pointer;

        .icon-follow {
          font-size: 20px;
          color: #165dff;
        }
      }
    }

    .detailbox_item_search {
      font-size: 14px;

      .followParams {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .followParams_item {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .followParams_label {}

          .followParams_select {
            border: 1px solid #165dff;
            border-radius: 3px;
            padding: 5px 10px 5px 5px;
            margin-left: 10px;
            font-size: 12px;
            display: flex;
            align-items: center;

            .followParams_select_txt {
              max-width: 130px;
              flex-shrink: 0;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }

            .icon-more {
              font-size: 14px;
              margin-left: 10px;
            }
          }

          .followParams_icon {
            color: #165dff;

            .iconfont {
              font-size: 20px;
            }
          }
        }
      }
    }

    .followList {
      // max-height: 400px;
      // overflow: auto;
    }

    .detail_content {
      background: #f9fafc;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #fbfcfe;
      padding: 17px 16px;

      .task_item_type {
        margin-bottom: 20px;

        .task_item_tt {
          font-weight: 800;
          font-size: 12px;
          color: #86909c;
          margin-bottom: 10px;
        }

        .task_item_val {
          font-weight: 700;
          font-size: 16px;
          color: #333333;
        }

        .task_item_desc {
          font-weight: 300;
          font-size: 14px;
          color: #000000;
          background: #f2f3f5;
          padding: 5px 6px;
        }
      }

      .task_itembox {
        overflow: hidden;

        .task_itembox_con {
          width: 50%;
          margin-bottom: 15px;
          float: left;

          .task_label {
            font-weight: 400;
            font-size: 12px;
            color: #86909c;
            margin-bottom: 5px;
          }

          .task_value {
            font-weight: 700;
            font-size: 16px;
            color: #2f2f2f;
          }
        }
      }
    }

    .relat_tab {
      display: flex;
      margin-bottom: 10px;

      .relat_tab_item {
        font-weight: 500;
        font-size: 12px;
        color: #333333;
        border-radius: 4px;
        padding: 5px 8px;
        background: #f7f7f7;
        margin-right: 5px;

        &.active {
          color: #165dff;
          background: #d8e3ff;
        }
      }
    }

    .relat_content {
      .relat_item {
        background: #ffffff;
        box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.09);
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #fbfcfe;
        margin-bottom: 20px;
        padding: 10px 9px 12px;

        .relat_content_header {
          margin-bottom: 10px;
          display: flex;
          justify-content: space-between;

          .name {
            font-weight: bold;
            font-size: 14px;
            color: #333333;
          }

          .status {
            font-weight: 700;
            font-size: 12px;
            color: #00b42a;
            background: #e8ffea;
            border-radius: 2px 2px 2px 2px;
            padding: 5px 8px;

            &.status2 {
              background: rgba(255, 48, 33, 0.2);
              color: #ff1100;
            }
          }
        }

        .relat_carInfo {
          font-weight: 300;
          font-size: 14px;
          color: #000000;
          background: #f2f3f5;
          padding: 5px 6px;
          margin-bottom: 12px;
        }

        .relat_user {
          display: flex;
          justify-content: space-between;
          font-weight: bold;
          font-size: 12px;
          color: #165dff;
          background: #e8f5ff;
          border-radius: 2px 2px 2px 2px;
          padding: 5px 6px;
        }
      }
    }

    .followInfo_content {
      .followInfo_item {
        padding: 10px 0px 10px 20px;

        .followInfo_top {
          display: flex;
          align-items: center;
          margin-bottom: 10px;

          .followInfo_circle {
            background: #f2f2f2;
            border-radius: 50%;
            width: 9px;
            height: 9px;
            margin-right: 10px;
          }

          .followInfo_name {
            font-weight: 700;
            font-size: 14px;
            color: #86909c;
          }
        }

        .followInfo_box {
          display: flex;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;

          .followInfo_linebox {
            width: 1px;
            position: relative;
            -ms-flex-item-align: stretch;
            align-self: stretch;
            background: #f2f2f2;
            margin: 0 10px 0 4px;
          }

          .followInfo_val {
            width: 100%;
            padding: 12px 16px;
            background: #f9fafc;
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #fbfcfe;
            flex: 1;

            .followInfo_val_item {
              display: flex;
              justify-content: space-between;
              margin-bottom: 10px;
              align-items: center;

              .item_label {
                font-weight: 400;
                font-size: 14px;
                color: #86909c;
              }

              .item_val {
                font-weight: 700;
                font-size: 14px;
                color: #2f2f2f;
              }
            }

            .followInfo_val_item2 {
              .item_label {
                font-weight: 400;
                font-size: 14px;
                color: #86909c;
                margin-bottom: 10px;
              }

              .item_val {
                font-weight: 300;
                font-size: 14px;
                color: #86909c;
                background: #f2f3f5;
                padding: 5px 6px;
              }
            }
          }
        }

        &.active {
          .followInfo_top {
            .followInfo_circle {
              background: #165dff;
            }

            .followInfo_name {
              color: #165dff;
            }
          }

          .followInfo_box {
            .followInfo_linebox {
              background: #165dff;
            }
          }
        }
      }
    }

    .carInfo_content {
      background: #f9fafc;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #fbfcfe;
      padding: 7px 16px;

      .carInfo_item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;

        .item_label {
          font-weight: 400;
          font-size: 12px;
          color: #86909c;
        }

        .item_val {
          font-weight: 700;
          font-size: 12px;
          color: #333333;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .contact_content {
      .contact_item {
        box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.02);
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #f4f4f6;
        margin-bottom: 3px;
        padding: 12px 10px 12px 10px;

        .contact_top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          margin-bottom: 14px;

          .item_label {
            font-weight: 700;
            font-size: 12px;
            color: #165dff;
            background: #e8f5ff;
            border-radius: 2px 2px 2px 2px;
            padding: 4px 5px;
          }

          .item_icon {
            display: flex;

            .item_img {
              width: 29px;
              height: 29px;
              margin-right: 17px;

              &:last-child {
                margin-right: 0;
              }
            }
          }
        }

        .contact_bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-left: 4px;

          .item_name {
            display: flex;

            .txt1 {
              font-weight: 400;
              font-size: 12px;
              color: #86909c;
            }

            .txt2 {
              font-weight: 700;
              font-size: 12px;
              color: #2f2f2f;
            }
          }
        }
      }
    }

    .repair_content {
      .repair_list {
        .repair_item {
          box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.05);
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #f4f4f6;
          padding: 10px;
          margin-bottom: 10px;

          .item_top {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #f7f5f5;
            padding-bottom: 10px;

            .item_num {
              display: flex;
              align-items: center;

              .item_icon {
                width: 11px;
                display: block;
                height: 11px;
                margin-right: 5px;
              }

              .item_name {
                font-weight: 800;
                font-size: 14px;
                color: #333333;
              }
            }

            .item_btn {
              font-weight: 400;
              font-size: 12px;
              color: #165dff;
            }
          }

          .item_bottom {
            padding-top: 8px;

            .item_box {
              display: flex;
              justify-content: space-between;
              margin-bottom: 10px;
              align-items: center;
              width: 100%;

              .item_lt {
                display: flex;

                .item_lable {
                  font-weight: 400;
                  font-size: 12px;
                  color: #86909c;
                }

                .item_val {
                  font-weight: 400;
                  font-size: 12px;
                  color: #2f2f2f;
                }
              }

              .item_rt {
                background: #e8f5ff;
                border-radius: 2px 2px 2px 2px;
                font-weight: 700;
                font-size: 10px;
                color: #165dff;
                padding: 3px 5px;
                display: flex;

                .item_lable {}

                .item_val {}

                .item_tel {
                  margin-left: 5px;
                }
              }

              .item_rt2 {
                display: flex;

                .item_lable {
                  font-weight: 400;
                  font-size: 12px;
                  color: #86909c;
                }

                .item_val {
                  font-weight: 400;
                  font-size: 12px;
                  color: #2f2f2f;
                }
              }
            }

            .item_box2 {
              .item_lt {
                display: flex;

                /* 使用弹性盒模型 */
                .item_lable {
                  font-weight: 400;
                  font-size: 12px;
                  color: #86909c;
                  width: 60px;
                }

                .item_val {
                  font-weight: 400;
                  font-size: 12px;
                  color: #2f2f2f;
                  width: calc(100% - 60px);
                }
              }
            }
          }
        }
      }
    }

    .card_content {
      min-height: calc(100vh - 150px);

      .card_item {
        border-radius: 4px;
        position: relative;
        height: 86px;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        background: #fff;

        .item_lt {
          width: 134px;
          height: 86px;
          font-weight: 700;
          font-size: 36px;
          line-height: 86px;
          color: #ffffff;
          background: url('~@/assets/images/card_bg.png') no-repeat center;
          background-size: 134px 86px;
          text-align: center;
          margin-right: 10px;
          border-radius: 0px 12px 12px 0px;
        }

        .item_rt {
          padding-top: 10px;

          .item_name {
            margin-bottom: 8px;
            font-weight: 700;
            font-size: 14px;
            color: #2f2f2f;
          }

          .item_number {
            font-weight: 700;
            font-size: 12px;
            color: #2f2f2f;
            margin-bottom: 8px;
          }

          .item_time {
            font-weight: 400;
            font-size: 12px;
            color: #86909c;
            display: flex;

            .txt1 {
              margin-right: 10px;
            }
          }
        }

        .item_type {
          font-weight: 700;
          font-size: 12px;
          color: #ffffff;
          text-align: center;
          padding: 5px 10px;
          border-radius: 0px 4px 0px 4px;
          background: #ff2b2b;
          position: absolute;
          top: 0px;
          right: 0;
        }
      }
    }

    .groupInfo {
      .groupInfo_item {
        display: flex;
        align-items: center;
        position: relative;
        margin-bottom: 20px;

        .groupInfo_icon {
          height: 50px;
          width: 50px;
          background: rgba(255, 48, 33, 0.6);
          border-radius: 4px;
          text-align: center;
          line-height: 50px;
          font-size: 24px;
          color: #fff;
          margin-right: 10px;
        }

        .groupInfo_detail {
          font-size: 12px;
          color: #999;

          .groupInfo_name {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 2px;
            margin-bottom: 6px;
            color: #333;
            width: 200px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }

          .groupInfo_txt {
            margin-bottom: 6px;

            .groupInfo_span {
              margin-right: 5px;
            }

            .groupInfo_span1 {
              margin-left: 5px;
            }
          }

          .groupInfo_txt1 {}
        }

        .groupInfo_btn {
          position: absolute;
          top: 0;
          right: 0;
          font-size: 14px;
          color: #165dff;

          .to_chat {
            text-align: center;
            margin-top: 9px;
          }
        }
      }
    }
  }

  .no_icon {
    padding: 25px;

    .no_icon_img {
      width: 70px;
      display: block;
      margin: auto;
    }

    .no_icon_txt {
      font-weight: 400;
      font-size: 14px;
      color: #86909c;
      text-align: center;
      margin-top: 10px;
    }
  }

  .mb80 {
    margin-bottom: 80px;
  }

  .mt0 {
    margin-top: 0px;
  }

  .mt175 {
    margin-top: 175px;
  }

  .detailbg {
    background: #f3f3f3;
  }

  .fixCenter_pop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 100;
    overflow: auto;

    .select_fixcenter {
      padding-top: 20px;

      .task_header_searchbox {
        position: fixed;
        top: 0;
        width: 100%;
        height: 50px;
        padding-top: 10px;
        background: #fff;
        z-index: 30;
      }

      .task_header_search {
        width: 343px;
        background: #f2f3f5;
        height: 36px;
        border-radius: 18px 18px 18px 18px;
        display: flex;
        align-items: center;
        margin: auto;
        padding-left: 14px;

        .search_icon {
          width: 16px;
          height: 16px;
          display: block;
          margin-right: 20px;
        }

        .search_val {
          background: #f2f3f5;
          font-weight: 400;
          font-size: 14px;
          display: block;
          color: #333;

          &::placeholder {
            color: #c9cdd4;
            text-align: center;
          }
        }
      }

      .fixCenter_content {
        margin-top: 40px;
        display: flex;

        .fixCenter_lt {
          width: 65%;
          background: #f7f8fa;
          height: calc(100vh - 100px);

          overflow: auto;

          .fixCenter_list {
            .fixCenter_item {
              display: flex;
              align-items: center;
              padding: 0 10px;
              height: 40px;
              position: relative;
              box-sizing: border-box;
              border-bottom: 1px solid #f7f8fa;

              .item_icon {
                width: 16px;
                height: 16px;
                display: block;
                margin-right: 10px;
              }

              .item_name {
                font-weight: 400;
                font-size: 14px;
                color: #1d2129;
              }

              &.active {
                background: #fff;

                &::before {
                  content: '';
                  width: 4px;
                  height: 20px;
                  background: #165dff;
                  position: absolute;
                  left: 0;
                }

                // border-left: 4px solid #165dff;
                .item_name {
                  font-weight: 400;
                  font-size: 14px;
                  color: #165dff;
                }
              }
            }
          }
        }

        .fixCenter_rt {
          width: 35%;
          height: calc(100vh - 100px);
          overflow: auto;

          .service_list {
            .service_item {
              box-sizing: border-box;
              padding: 0 10px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 40px;
              border-bottom: 1px solid #f7f8fa;

              .item_name {
                font-weight: 400;
                font-size: 14px;
                color: #4e5969;
              }

              .item_icon {
                width: 20px;
                height: 20px;
              }

              &.active {
                .item_name {
                  font-weight: 400;
                  font-size: 14px;
                  color: #165dff;
                }
              }
            }
          }
        }
      }

      .fixCenter_btn {
        display: flex;
        width: 100%;
        box-sizing: border-box;
        position: fixed;
        bottom: 0;
        left: 0;
        background: #fff;

        .cancel_btn {
          width: 50%;
          font-weight: 400;
          font-size: 18px;
          color: #1d2129;
          border-right: 1px solid #e5e6eb;
          padding: 12px;
          text-align: center;
        }

        .confirm_btn {
          font-weight: 400;
          width: 50%;
          font-size: 18px;
          color: #165dff;
          padding: 12px;
          text-align: center;
        }
      }
    }
  }

  /deep/ .van-tabs__line {
    display: none;
  }

  /deep/ .van-tab {
    // width: 102px;
    max-width: 144px;
    font-weight: 400;
    font-size: 14px;
    color: #4e5969;
    text-align: center;
    background: #f7f7f7;
    border-radius: 32px;
    padding: 8px 16px;
    margin-right: 6px;
    // cursor: pointer;
    // flex: inherit;
  }

  /deep/ .van-tab--active {
    color: #165dff;
    text-align: center;
    background: #d8e3ff;
  }

  /deep/ .van-tabs__nav--line {
    height: 30px;
    padding: 10px;
  }

  /deep/ .van-tabs--line .van-tabs__wrap {
    height: auto;
    position: fixed;
    top: 116px;
    left: 0;
    width: 100%;
    z-index: 10;
    background: #fff;
  }

  /deep/ .van-tabs__wrap--scrollable .van-tabs__nav {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    width: 85%;
  }

  .h600 {
    max-height: 300px;
    overflow: auto;
  }

  .groupInfo_content {
    padding-bottom: 20px;
    margin-bottom: 30px;
    overflow: auto;
  }

  .userList_content {
    overflow: auto;

    .userList_item:last-child {
      margin-bottom: 0;
    }
  }

  .pt80 {
    padding-top: 80px;
  }

  .followListbox {
    height: calc(100vh - 240px);
    overflow: auto;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .red {
    color: #ff3415;
  }

  .green {
    color: #00b42a;
  }

  .blue {
    color: #165dff;
  }

  .null_height {
    height: 165px;
    border-bottom: 10px solid #f3f3f3;
  }

  .videoClass {
    height: 100%;
    display: flex;
    align-items: center;
    margin-left: 10px;
    font-size: 12px;
    color: #999999;
  }

  .borderClass {
    border: 1px solid #c3c3c3;
    padding: 10px;
    margin-top: 5px;
  }

  .phoneNumberIcon {
    position: fixed;
    right: 30px;
    bottom: 70px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.09);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .calldialogClass {
    width: 90vw;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    line-height: 25px;
  }

  .callButtonClass {
    width: 25%;
    height: 30px;
    border-radius: 5px;
    line-height: 30px;
    text-align: center;
    background-color: #1684fc;
    color: #fff;
    margin:0 10px;
  }
  .dialogInput{
	  border: 1px solid #ededed;
    width: 100%;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    line-height: 50px;
  }
</style>
